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

回答

相关问题