JavaScript核心技術學習筆記（2）——DOM基礎（2）
阿新 • • 發佈：2018-09-22
轉換 替換元素 沒有 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）