Erstellen von Element mit Text zur gleichen Zeit

Question

Ich versuche, ein Absatzelement mit etwas Text zu erstellen, aber ich denke, ich angehängt den Text, bevor das Absatzelement zum DOM hinzugefügt wird. Wie kann ich das beheben?

function myFn() { 
    var paragraph = document.createElement("P"); 
    var text = document.createTextNode("This is some paragraph text."); 

    paragraph.className = "heading"; 
    paragraph.style.width = "100vw"; 
    paragraph.style.background = "blue"; 
    document.getElementById("container").appendChild(paragraph); 
    document.getElementById("heading").appendChild(text); 
} 

Pen: http://codepen.io/ourcore/pen/XdGRXN

Dank!

Answer 1

wie diese versuchen: See DEMO

function myFn() { 
    var paragraph = document.createElement("P"); 
    var text = document.createTextNode("This is some paragraph text."); 

    paragraph.id = "heading"; 

    paragraph.style.width = "100vw"; 
    paragraph.style.background = "blue"; 
    document.getElementById("container").appendChild(paragraph); 
    document.getElementById("heading").appendChild(text); 
} 

Answer 2

verwenden

function myFn() { 
    var paragraph = document.createElement("P"); 
    var text = document.createTextNode("This is some paragraph text."); 

    paragraph.style.width = "100vw"; 
    paragraph.style.background = "blue"; 
    paragraph.appendChild(text); 
    document.getElementById("container").appendChild(paragraph);  
} 

Answer 3

Hier ist der Code, um ein Element zu Ihrem dom anhängen.

http://codepen.io/xequence/pen/ZWPKOW

function myFn() { 
    var paragraph = document.createElement("P"); 
    var text = document.createTextNode("This is some paragraph text."); 

    paragraph.appendChild(text); 

    paragraph.className = "heading"; 
    paragraph.style.width = "100vw"; 
    paragraph.style.background = "blue"; 
    var currentDiv = document.getElementById("container"); 
    document.body.insertBefore(paragraph, currentDiv); 
}