香草的JavaScript/DOM锻炼帮助（加红尾段）

我的HTML代码：香草的JavaScript/DOM锻炼帮助（加红尾段）

<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为“页面页脚”页面。由于它是页脚段落，我假设它必须放在关闭段落标记之后。这是我试图但不起作用：

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;

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

来源

2015-10-17 Jason Hyungchul Kang

要附加页脚部分谷歌的appendChild – Akxe

'使用document.createElement（ “ID”）;'为99.9％，有可能是错的，也许更多... – dandavis

什么错误你在控制台上看到了吗？ – 2015-10-17 06:25:08

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

这里有一个工作补丁（打 “运行片断”，看它在行动）：

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>

来源

2015-10-17 03:42:45

要将页脚作为兄弟插入标题，请尝试insertBefore标题的nextSibling。这将确保页脚出现在章节标签后面。

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>

来源

2015-10-17 03:44:16

香草的JavaScript/DOM锻炼帮助（加红尾段）

回答

相关问题