javascript給html添加結點操作

    如上代碼，展現出來是

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

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

結點后添加 appendChild

獲得要添加內容

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

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

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

將內容放在文本結點中

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

    var newText =document.createTextNode(inText);

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

將文本結點放在段落中

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

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

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

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

    newGraf.appendChild(newText);

將段落掛載在頁面依附點上

    好了，內容綁定到段落上面了，但是段落似乎還是沒有找到依附點啊。

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

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

    這時候，從哪里作為突破口呢？

    獲得document中對象的經常使用方法有3個，其中1個是通過tagName來獲得的。tagName獲得對象時既不需要id屬性，也不需要name屬性，而是直接通過標簽名稱來獲得對象的。

    這里我們就通過form標簽名來獲得form對象。

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

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

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

    拿到段落要掛載的依附點后，需要將段落掛載在依附點上。

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

    整理后的完全代碼為：

結點前添加insertBefore

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

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

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

    document.body 指的是document對象的body子對象，即html頁面上面的body標簽域。

    insertBefore 方法與 appendChild 方法不同：appendChild方法傳遞1個參數，由依附點來調用，傳遞要掛載的段落；insertBefore 方法由document.body調用，傳遞兩個參數，要掛在的段落內容 和 掛載的依附點名稱，第1個參數為包括要添加內容的段落，第2個參數為依附點，行將第1個參數的段落插在第2個參數對象之前。

    總結1下給html頁面添加結點內容信息的步驟：

    1 獲得要添加的內容

    2 將內容放在文本節(jié)點中

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

    4 將段落掛在頁面的依附點上

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈