ParentNode和insertBefore

我創建了一個包含問題的提示框。回答完之後，您將收到一個名爲id2的由div創建的答案。現在我正試圖將我的id2置於父節點id1的前面。所以它會顯示第一格id1以上的答案。有人可以向我解釋爲什麼它不起作用嗎？ParentNode和insertBefore

<!DOCTYPE html> 
<html> 
<head> 
<title>lab7</title> 
<meta charset="utf-8" lang="en" name="my page" /> 
<style> 
    .class1 { 
     width: 100%; 
     height: 60px; 
     background-color: #BCC6CC; 
     } 
</style> 
<script type="text/javascript"> 
    function loadQ() { 
    var firstdiv = document.createElement("div"); 
     firstdiv.setAttribute("class", "class1"); 
     firstdiv.setAttribute("id", "id1"); 
    var jw = prompt("Which movie is number 1 Box Office 2015?","Jurassic World"); 
    document.getElementById("id2").innerHTML ="" + jw + " Made $652,198,011 Total Gross Sales"; 
    document.getElementById("id2").style.backgroundColor = "#786D5F"; 
    var id1 = document.getElementByTagName("div")[0]; 
    var parent1 = id1.parentNode(); 
    var beforeME = document.getElementByTagName("id2"); 
    parent1.insertBefore(id1, beforeME); 

    }; 
</script> 
</head> 
<body onload="loadQ()"> 
    <div id="id1" class="class1"> 
    <br> 
     <b>Top 2 Box Office Movie for 2015</b> 
    </div> 
    <div class="class2" id="id2"> 
    </div> 
</body> 
</html>

來源

2015-12-10 Sow

我希望你比你對問題標題更加關注你的代碼。 –

有在你的代碼至少兩個問題：

document.getElementsByTagName需要一個s（它返回多個元素小號）。
要通過id獲取對象，您需要使用document.getElementById。

來源

2015-12-10 08:41:03 jcaron

謝謝我糾正了缺失的「s」，我改變了'var beforeME = document.getElementById（「id2」）;'但div仍然停留在parentNode的下方 – Sow

您的代碼獲取第一個div（它是包含「Top 2 Box Office Movie for 2015「），然後獲取它的父節點（它是'body'），然後在id爲id2的div（它是空的div）之前插入新的div。所以它被插入你告訴它的地方。如果你想把它插入別的地方，你必須告訴我們在哪裏）。順便說一句，如果你已經有一個ID爲id1的新的div，那不是一件好事。 – jcaron

謝謝，你說得對，我一直在循環。我今天就明白了！我要把正確的答案。 – Sow

我重寫了我的代碼並使其更加清晰。所以，每個div id和class都是定義的。

<script type="text/javascript"> 
     function loadQ() { 
      var firstdiv = document.createElement("div"); 
       firstdiv.setAttribute("class", "class1"); 
       firstdiv.setAttribute("id", "id1"); 
       firstdiv.style.backgroundColor = "#BCC6CC;"; 
    document.getElementById('id1').innerHTML ="<h2 style='padding:20px;'>Top Box Office Movie 2015</h2>","<br><br>"; 

      var seconddiv = document.createElement("div"); 
       seconddiv.setAttribute("class", "class2"); 
       seconddiv.setAttribute("id", "id2"); 
       seconddiv.style.backgroundColor = "#786D5F"; 
        var reper = document.getElementById('id1'); 
        var parinte = reper.parentNode; 
         parinte.insertBefore(seconddiv, reper); 
</script>

來源

2015-12-11 09:13:53 Sow

ParentNode和insertBefore

回答

相關問題