香草的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鍛鍊幫助（加紅尾段）

回答

相關問題