Temel DOM zincirini anlama

Question

JavaScript ve DOM ile çalışmaya başladım, en azından bir süre için jQuery ve benzerinden uzak durmaya çalışıyorum. Bunu göz önünde bulundurarak, öğreticiler, genellikle bu gibi bir örnek sağlar:

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

bu düzene ve değişkenleri önlemek için bir girişim olarak, başarıyla aşağıdaki zincirleme: Bu çalışır

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

, denedim aşağıdaki ile

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

:

aşağıdaki başa getirebilir operasyonu kısaltmak için

Ancak bu sefer istenildiği gibi çalışmadı: metin, BODY öğesinin sonuna yerleştirildi ve bir ekleme yerine bir ekleme elde edildi.

Başarılı ilk durumda sadece bir fluke olduğunu hayal ediyorum ama bu zincirleme uygulamasında neyin yanlış olduğunu göremiyorum. Yanlış yerlerde paranteziniz var demektir

Answer 1

Satır:

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

olması gerektiği Nasıl:

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

Şimdi bu genellikle bir satırda tüm birleştirmek için kötü bir fikir olduğunu anlamak.

Tamam, bu sabit satır size kodunuzun 'değişkenlerle' davranışını tam olarak vermeyecektir. Bunun nedeni, .appendChild öğesinin alt öğelerini (sizin durumunuzda <H1>) değil, alt DOM öğesini (sizin durumunuzda <INPUT>) döndürmesidir. Ancak, <H1> DOM öğesinin tümünün belgenin başında eklenmiş olmasını istiyorsunuz.

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

Çocuklar, bu eğitim amaçlı sadece böyle kodu kullanabilirsiniz etmeyiniz))) Size `insertBefore (kapattığım