js瀏覽器操作DOM之插入DOM

來源:互聯網
上載者:User

標籤:獲得   doc   html   一個   child   瀏覽器   list   插入   sch   

當我們獲得了某個DOM節點,想在這個DOM節點插入入新的DOM,應該如何做?

如果這個DOM節點是空的,例如,<div></div>,那麼,直接使用innerHTML = ‘<span>child</span>‘就可以修改DOM節點的內容,相當於“插入”了新的DOM節點。

如果這個DOM節點不是空的,那就不能這麼做,因為innerHTML會直接替換掉原來的所有子節點。

有兩個辦法可以插入新的節點。一個是使用appendChild,把一個子節點添加到父節點的最後一個子節點。例如:

<!-- HTML結構 --><p id="js">JavaScript</p><div id="list">    <p id="java">Java</p>    <p id="python">Python</p>    <p id="scheme">Scheme</p></div>

<p id="js">JavaScript</p>添加到<div id="list">的最後一項:

var    js = document.getElementById(‘js‘),    list = document.getElementById(‘list‘);list.appendChild(js);

現在,HTML結構變成了這樣:

<!-- HTML結構 --><div id="list">    <p id="java">Java</p>    <p id="python">Python</p>    <p id="scheme">Scheme</p>    <p id="js">JavaScript</p></div>

 

js瀏覽器操作DOM之插入DOM

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.