香草Javascript/DOM练习帮助(添加红脚段)

Vanilla Javascript/DOM exercise help (adding red footer paragraph)

本文关键字：添加 帮助 Javascript DOM 练习 香草      更新时间：2023-09-26

My HTML Code: 

 <html>
 <head>
<link rel="stylesheet" href="styles.css" media="screen" title="no title" charset="utf-8">
      <title>Vanilla</title>
 </head>
   <body>
  <section id="header">
  <h1 id="page-title">Vanilla DOM</h1>
  <div id="image-container">
    <img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/c/c0/Vanilla_Ice.jpg" alt="Vanilla Ice" />
  </div>
     <p id="description">
      Vanilla JavaScript can be awesome. Here's why.
     </p>
  <ul id="awesome-list">
    <li class="awesome-list-item">It is built into JavaScript.</li>
    <li class="awesome-list-item">Everybody loves vanilla.</li>
    <li class="awesome-list-item">Everybody loves Vanilla.</li>
  </ul>
</section>
<script type="text/javascript" src="scripts.js"></script>
   </body>
   </html>

我想做的是添加一个红色页脚段落的页面id为"page-footer"。因为它是一个页脚段落，我假设它必须放在结束部分标记之后。这是我尝试的，但不工作:

 var redFooter = document.createElement("id");
 redFooter.setAttribute("id", "page-footer");
 redFooter.setAttribute("style", "color: red;"); 
 var section = document.getElementById("header"); 
 section.appendChild(redFooter); 
 var redFooter = document.getElementByClass("page-footer");
 var newParagraph = "This is a new red paragraph";
 redFooter.innerHTML = newParagraph;

我想知道我做错了什么。有人能指出这个问题吗?谢谢你。

简单的问题:当你应该使用getElementById时，你正在使用getElementByClass:

这是一个有效的修复(点击"运行片段"查看它的运行):

var redFooter = document.createElement("div");
redFooter.setAttribute("id", "page-footer");
redFooter.setAttribute("style", "color: red;"); 
document.getElementById("header").appendChild(redFooter); 
var redFooter = document.getElementById("page-footer");
var newParagraph = "This is a new red paragraph";
redFooter.innerHTML = newParagraph;
<body>
    <section id="header">
        <h1 id="page-title">Vanilla DOM</h1>
        <div id="image-container">
            <img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/c/c0/Vanilla_Ice.jpg" alt="Vanilla Ice" />
        </div>
        <p id="description">Vanilla JavaScript can be awesome. Here's why.</p>
        <ul id="awesome-list">
            <li class="awesome-list-item">It is built into JavaScript.</li>
            <li class="awesome-list-item">Everybody loves vanilla.</li>
            <li class="awesome-list-item">Everybody loves Vanilla.</li>
        </ul>
    </section>
</body>

要插入页脚作为header的兄弟，请尝试insertbeforenextsibling of header。这将确保页脚出现在section标签之后。

var redFooter = document.createElement("section");
 redFooter.setAttribute("id", "page-footer");
 redFooter.setAttribute("style", "color: red;"); 
 var body = document.getElementsByTagName("body")[0]; 
  body.insertBefore(redFooter,document.getElementById("header").nextSibling);
var p = document.createElement("p");
p.setAttribute("id","footer-para");
redFooter.appendChild(p);
p.innerHTML = "This is a new red paragraph";
 
<html>
 <head>
<link rel="stylesheet" href="styles.css" media="screen" title="no title" charset="utf-8">
      <title>Vanilla</title>
 </head>
   <body>
  <section id="header">
  <h1 id="page-title">Vanilla DOM</h1>
  <div id="image-container">
    <img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/c/c0/Vanilla_Ice.jpg" alt="Vanilla Ice" />
  </div>
     <p id="description">
      Vanilla JavaScript can be awesome. Here's why.
     </p>
  <ul id="awesome-list">
    <li class="awesome-list-item">It is built into JavaScript.</li>
    <li class="awesome-list-item">Everybody loves vanilla.</li>
    <li class="awesome-list-item">Everybody loves Vanilla.</li>
  </ul>
</section>
<script type="text/javascript" src="scripts.js"></script>
   </body>
   </html>

相关文章：