1. 程式人生 > >JavaScript核心技術學習筆記(2)——DOM基礎(2)

JavaScript核心技術學習筆記(2)——DOM基礎(2)

轉換 替換元素 沒有 ack true html中 事件 想要 dom基礎

DOM基礎(2)

一、插入元素

上一篇文章中我們學會了如何創建元素,但僅僅是創建一個元素而沒有插入到HTML中,這是沒有意義的。插入元素有以下兩種方法:

? appendChild()

? insertBefore()

首先提出一個問題,如果我們想要將文本框中輸入的內容在點擊“輸入”按鈕後顯示在網頁的列表清單中,該怎麽做?

我們的思路應該是,先獲取按鈕的元素,然後為它建立添加點擊事件,函數中獲取文本框元素,將輸入到其中的內容轉換為文本節點,再獲取列表元素,新建一個元素節點,將文本節點插入元素節點,再將組裝後的元素節點插入列表元素中。

代碼如下:

<script>
    //作者太懶不想打代碼了,思路上面已經寫出,有幸訪問本文的讀者如果還有疑問,請私信我
</script>

<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
    </ul>
    <input id="txt" type="text"/><input id="btn" type="button" value="插入"/>
</body>

下面開始介紹上面兩種方法的功能:

1. appendChild()——將一個新元素插入到父元素的內部子元素的末尾,由於上篇文章中已多次出現此方法,故不多贅述

2. insertBefore()——將一個新元素插入到父元素的某個子元素之前,語法為A.insertBefore(B,ref),其中,ref表示指定的子元素,當然大家也一定清楚,A代表父元素,B代表新子元素啦!

我們不難發現,這兩種方法很好地形成了互補,第一種方法是插入到最後一個子元素後,而第二種方法是插入到任意一個子元素前,那麽我們就可以將新元素插入到任何一個地方啦

刪除,復制,替換元素待更新~

JavaScript核心技術學習筆記(2)——DOM基礎(2)