warum zeigt die insert Fehler

Question

Ich beabsichtige, ein neues Div Element über Javascript zu erstellen, aber ich habe Probleme meinen Code der

<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>

meine eigentliche Absicht einfügen DOM anhängt war das neue div vor dem Inhalt im Container. Ich verstehe das DOM auch als einen Baum von Objekten und Hierarchie. Ich dachte, dass ich über diese Hierarchie durch den Baum navigieren könnte. das ist von Dokument ---> Körper -----> Container.

Es hat auf dem Container funktioniert, aber nicht die Inhalte Div. Kann mir bitte jemand sagen, was ich hier vermisse?

Ich habe versucht, die NewDiv an das DOM vor dem Inhalt anhängen, aber ich konnte nicht. Ich konnte es an den Container DIV anhängen, der ein Elternteil des Inhalts Div ist. Mein Hauptanliegen ist, warum ich es nicht vor dem Inhalt mit der Einfüge vor Methode anhängen kann.

Answer 1

Ich dachte, ich könnte den Baum über diese Hierarchie navigieren. das ist von Dokument ---> Körper -----> Container.

Sie können nicht.

Verwenden Sie document.getElementById(), um ein Element anhand seiner ID abzurufen.

Answer 2

versuchen, diese

<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

<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>