Zrozumienie podstawowego łańcucha DOM

Question

Zaczynam od JavaScript i DOM, starając się celowo trzymać się z daleka od jQuery i tym podobnych, przynajmniej na chwilę. Mając to na uwadze, tutoriale ogólnie podać przykład takiego jak ten:

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

W dążeniu do usprawnienia tego i uniknięcia zmiennych pomyślnie przykuty następujące:

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

Chociaż to działa, próbowałem skrócić następujące prepend operacji:

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

z następujących czynności:

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

Ale tym razem nie zadziałało zgodnie z oczekiwaniami: tekst jest umieszczany na samym końcu elementu BODY, uzyskując wstawkę zamiast przedrostka.

Wyobrażam sobie, że udany pierwszy przypadek to tylko fuks, ale nie widzę, co jest nie tak z tą praktyką łańcuchową.

Answer 1

Masz nawias w niewłaściwych miejscach. Linia:

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

Jak powinno być:

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

Teraz już rozumiem, dlaczego to jest ogólnie zły pomysł, aby połączyć wszystko w jednej linii.

OK, ta ustalona linia nie zapewni dokładnego zachowania kodu "ze zmiennymi". Dzieje się tak, ponieważ .appendChild zwraca element DOM dziecka (<INPUT> w twoim przypadku), a nie rodzic (<H1> w twoim przypadku). Ale chcesz, aby cały element DOM <H1> został dodany na początku dokumentu. Aby to osiągnąć w jednej linii należy użyć właściwości .parentNode:

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

Chłopaki, proszę nie używać takiego kodu, to tylko w celach edukacyjnych)))