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)