javascript給html添加結(jié)點(diǎn)操作

    如上代碼，展現(xiàn)出來是

    如果想通過Add some text to the page 按鈕給頁面添加1些內(nèi)容，那該如何操作呢？

    給Add some text to the page 按鈕的單擊事件綁定1個(gè)操作，讓這個(gè)操作去給頁面添加內(nèi)容。

結(jié)點(diǎn)后添加 appendChild

獲得要添加內(nèi)容

    添加哪里的內(nèi)容呢？姑且，我們就先添加按鈕上方的輸入框中的內(nèi)容吧。

    var inText =document.getElementById("contentArea").value;

    getElementById 方法獲得到的是contentArea 這個(gè)id指向的對(duì)象，即頁面上面的文本輸入域。

將內(nèi)容放在文本結(jié)點(diǎn)中

    拿到值以后該怎樣辦呢？需要?jiǎng)?chuàng)建1個(gè)文本節(jié)點(diǎn)，將內(nèi)容接收。

    var newText =document.createTextNode(inText);

    拿到的文本節(jié)點(diǎn)后，還沒法將其顯示在頁面上。

將文本結(jié)點(diǎn)放在段落中

    這時(shí)候候還需要將它作為段落內(nèi)容添加在頁面的節(jié)點(diǎn)上。段落內(nèi)容，那先創(chuàng)建1個(gè)段落吧。

    var newGraf =document.createElement("p");

    這行代碼創(chuàng)建了1個(gè)空的段落行，里面還沒有內(nèi)容。

    段落對(duì)象中，有1個(gè)方法，叫做appendChild，是將文本節(jié)點(diǎn)信息綁定在段落上面的。

    newGraf.appendChild(newText);

將段落掛載在頁面依附點(diǎn)上

    好了，內(nèi)容綁定到段落上面了，但是段落似乎還是沒有找到依附點(diǎn)啊。

    我們就先把段落掛在form表單后面吧。如果form表單有id屬性的話（假定其id為form1），我們就能夠通過

var docForm = document.getElementById("form1"); 來獲得到form，但是form沒有id屬性；假設(shè)form有name屬性的話，我們也能夠通過getElementsByName拿到同名的form數(shù)組，然后獲得到我們需要的form，不巧，name屬性也沒有。

    這時(shí)候，從哪里作為突破口呢？

    獲得document中對(duì)象的經(jīng)常使用方法有3個(gè)，其中1個(gè)是通過tagName來獲得的。tagName獲得對(duì)象時(shí)既不需要id屬性，也不需要name屬性，而是直接通過標(biāo)簽名稱來獲得對(duì)象的。

    這里我們就通過form標(biāo)簽名來獲得form對(duì)象。

    document.getElementsByTagName("form")這個(gè)可以了嗎？噢，忘了，通過tagName獲得到的結(jié)果集是集合，是該標(biāo)簽名對(duì)象的集合，我們要獲得的form是第幾個(gè)呢？

    第1個(gè)，那集合中就是第0個(gè)了，即document.getElementsByTagName("form")[0]。

    好了，那我們的代碼就是var docForm = document.getElementsByTagName("form")[0];

    拿到段落要掛載的依附點(diǎn)后，需要將段落掛載在依附點(diǎn)上。

    這時(shí)候，需要再次用appendChild方法了，即 docForm.appendChild(newGraf)。

    整理后的完全代碼為：

結(jié)點(diǎn)前添加insertBefore

    繼續(xù)上面的代碼，如果想把內(nèi)容添加在form表單前面呢？

    變動(dòng)比較小，將docForm.appendChild(newGraf);

    換為document.body.insertBefore(newGraf, docForm); 就能夠了。

    document.body 指的是document對(duì)象的body子對(duì)象，即html頁面上面的body標(biāo)簽域。

    insertBefore 方法與 appendChild 方法不同：appendChild方法傳遞1個(gè)參數(shù)，由依附點(diǎn)來調(diào)用，傳遞要掛載的段落；insertBefore 方法由document.body調(diào)用，傳遞兩個(gè)參數(shù)，要掛在的段落內(nèi)容 和 掛載的依附點(diǎn)名稱，第1個(gè)參數(shù)為包括要添加內(nèi)容的段落，第2個(gè)參數(shù)為依附點(diǎn)，行將第1個(gè)參數(shù)的段落插在第2個(gè)參數(shù)對(duì)象之前。

    總結(jié)1下給html頁面添加結(jié)點(diǎn)內(nèi)容信息的步驟：

    1 獲得要添加的內(nèi)容

    2 將內(nèi)容放在文本節(jié)點(diǎn)中

    3 將文本節(jié)點(diǎn)放在段落中

    4 將段落掛在頁面的依附點(diǎn)上

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)