बुनियादी डोम चेनिंग

Question

को समझना मैं जावास्क्रिप्ट और डोम के साथ शुरू कर रहा हूं, कम से कम थोड़ी देर के लिए, जानबूझकर jQuery से दूर रहना चाहता हूं। इसे ध्यान में रखते, ट्यूटोरियल आम तौर पर एक उदाहरण इस जैसे प्रदान करते हैं: यह सरल बनाने और चर से बचने के प्रयास में

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

, मैं सफलतापूर्वक निम्नलिखित श्रृंखलित: एक ओर जहां यह काम करता है

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

, मैंने कोशिश की

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

निम्नलिखित के साथ

:

निम्नलिखित आगे जोड़ते आपरेशन छोटा करने के लिए

लेकिन इस बार यह वांछित के रूप में काम नहीं करता था: टेक्स्ट बॉडी तत्व के बहुत ही अंत में रखा गया है, एक प्रीपेन्ड के बजाय एक संलग्नक प्राप्त करना।

मुझे लगता है कि सफल पहला मामला सिर्फ एक झलक है, लेकिन मैं नहीं देख सकता कि इस श्रृंखला के साथ क्या गलत है।

Answer 1

आपके पास गलत जगहों पर ब्रांडेसिस है। आपका पंक्ति:

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

यह कैसे किया जाना चाहिए:

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

अब आप समझ क्यों यह आम तौर पर एक बुरा विचार एक पंक्ति में सभी मर्ज करने के लिए है।

ठीक है, यह निश्चित रेखा आपको चर के साथ 'कोड' के सटीक व्यवहार नहीं देगी। ऐसा इसलिए है क्योंकि .appendChild आपके मामले में बच्चे DOM तत्व (<INPUT>) देता है, न कि माता-पिता (<H1> आपके मामले में)। लेकिन आप चाहते हैं कि सभी <H1> दस्तावेज़ की शुरुआत में DOM तत्व जोड़ा गया था। एक पंक्ति में इस लक्ष्य को हासिल करने के लिए आप .parentNode संपत्ति का उपयोग करने की जरूरत है:

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

दोस्तों, कृपया इस तरह के कोड का उपयोग नहीं करते, यह सिर्फ शैक्षिक उद्देश्यों के लिए है)))