Question

我打算通过javascript创建一个新的Div元素，但我有问题将我的代码附加到DOM

<div id="container">
  <div id="content"></div>
   </div>
  <script>
    var container = document.getElementById('container');

    function divCreate() {

        var newDiv = document.createElement('div');
        var newContent = document.createTextNode('Hello this is 
         
        div via javascript!'); 
                                                               
        newDiv.appendChild(newContent);

        var currentDiv = document.getElementById('content');

        document.body.container.insertBefore(newDiv, currentDiv);
  }
                  
  divCreate();
  </script>

我的目的是在容器内的内容之前插入新的div。我确实将DOM理解为对象和层次结构树。我认为我可以通过这个层次结构导航树。这是来自document ---＆gt; body -----＆gt; container。

它确实在容器上工作，但不是内容div。有人可以告诉我这里缺少什么吗？

我确实尝试在内容之前将newDiv附加到DOM，但我无法做到。我能够将它附加到容器DIV，它是内容Div的父级。我主要担心的是为什么ami无法使用insert before方法在内容之前附加它。

Answer 1

我以为我可以通过这种层次结构导航树。这是来自document ---＆gt; body -----＆gt; container。

你不能。

使用document.getElementById()按ID获取元素。

Answer 2

试试这个

 <div id="container">
    <div id="content">
    </div>
    </div>
    <script>
    var container = document.getElementById('container');
    function divCreate()   {
    var newDiv = document.createElement('div');
    var newContent = document.createTextNode('Hello ....');
    newDiv.appendChild(newContent);
    var currentDiv = document.getElementById('content');    
    document.body.container.insertBefore(newDiv,currentDiv}
    divCreate();    
    </script>

Answer 3

＆＃13;

<div id="container">
  <div id="content">
  </div> </div>
  <script>
    var container = document.getElementById('container');

    function divCreate() {

        var newDiv = document.createElement('div');
        var newContent = document.createTextNode('Hello this is a div is added via javascript');   
                                                               
        newDiv.appendChild(newContent);

        var currentDiv = document.getElementById('content');

        container.insertBefore(newDiv, currentDiv);
  }
                  
  divCreate();
  </script>

＆＃13;

为什么insertBefore显示错误

3 个答案: