Grundlegende DOM-Verkettung verstehen

Question

Ich beginne mit JavaScript und dem DOM und versuche, zumindest für eine Weile absichtlich von jQuery und ähnlichem Abstand zu halten. Mit dem im Verstand, Tutorials im Allgemeinen ein Beispiel geben, wie dies:

h = document.createElement("h1"); 
t = document.createTextNode("Hello."); 
h.appendChild(t); 
document.body.appendChild(h); 

In einem Versuch, diese zu optimieren und Variablen zu vermeiden, ich folgende erfolgreich angekettet:

document.body.appendChild(document.createElement("h1")).appendChild(document.createTextNode("Hello.")); 

Während das funktioniert, habe ich versucht, zu verkürzen, die folgende Operation prepend:

h = document.createElement("h1"); 
t = document.createTextNode("Put this on top."); 
h.appendChild(t); 
document.body.insertBefore(h,document.body.firstChild); 

mit folgendem:

document.body.insertBefore(document.createElement("h1")).appendChild(document.createTextNode("Put this on top."),document.body.firstChild); 

Diesmal funktionierte es jedoch nicht wie gewünscht: Der Text wurde am Ende des BODY-Elements platziert, um einen Anhang anstelle eines Vorsatzes zu erhalten.

Ich stelle mir vor, der erfolgreiche erste Fall ist nur ein Zufall, aber ich kann nicht sehen, was mit dieser Verkettungspraxis nicht stimmt.

Answer 1

Sie haben Klammern an den falschen Stellen. Ihre Linie:

document.body.insertBefore(document.createElement("h1")) 
.appendChild(document.createTextNode("Put this on top."), document.body.firstChild); 

Wie es sein sollte:

document.body.insertBefore(
    document.createElement("h1").appendChild(
     document.createTextNode("Put this on top.")), document.body.firstChild); 

Jetzt verstehen Sie, warum dies ist in der Regel eine schlechte Idee, alles in einer Zeile zu verschmelzen.

Ok, diese feste Linie gibt Ihnen nicht genaues Verhalten Ihres Codes 'mit Variablen'. Dies liegt daran, dass .appendChild das untergeordnete DOM-Element (in Ihrem Fall <INPUT>) zurückgibt, nicht das übergeordnete Element (<H1> in Ihrem Fall). Aber Sie wollen, dass alle DOM-Element am Anfang des Dokuments hinzugefügt wurde. Um dies zu erreichen in einer Zeile müssen Sie .parentNode Eigenschaft verwenden:

document.body.insertBefore(
    document.createElement("h1").appendChild(
     document.createTextNode("Put this on top.")).parentNode, document.body.firstChild) 

Jungs, bitte einen solchen Code nicht verwenden, das ist nur für Bildungszwecke)))