document動態操做元素

時間 2019-11-11

標籤 document 動態元素简体版

原文原文鏈接

（一）動態建立元素

1. 經過innerHTML建立元素

語法：元素.innerHTML = '內容';app

 1 <body>
 2     <button>add</button>
 3     <ul>
 4         <li>列表項</li>
 5     </ul>
 6     <script>
 7     //更新ul中的內容，動態添加li
 8     var btn = document.querySelector('button');
 9     var ul = document.querySelector('ul');
10     btn.onclick = function() {
11         var old = ul.innerHTML; //原有的li
12         ul.innerHTML = old + '<li>new list</li>';
13     }
14     </script>   
15 </body>

innerHTML適用於少許的拼接，由於字符串大量拼接時有性能問題。函數

2. 經過document.createElement建立元素

語法：document.createElement('標籤名'); //返回一個新的元素對象性能

 1 <body>
 2     <button>add</button>
 3     <ul>
 4         <li>列表項</li>
 5     </ul>
 6     <script>
 7     //更新ul中的內容，動態添加li
 8     var btn = document.querySelector('button');
 9     var ul = document.querySelector('ul');
10     btn.onclick = function() {
11       var newChild = document.createElement('li'); 
12       newChild.innerText = '新元素';  //設置內容，給誰設置誰就點
13       ul.appendChild(newChild);  //追加元素
14     };
15     </script>   
16 </body>

3. 兩種方法比較

createElement不須要拼接，會自動追加到下一項。運行速度比innerHTML拼接要快。（推薦使用）spa

innerHTML大量拼接字符串時速度慢。code

(二)動態追加元素

語法：父元素.appendChild(子元素);對象

函數封裝注意：對於函數體中不能寫死的地方用參數。blog

 1 <button>建立li</button>
 2 <ul>
 3 <li>我是li</li>
 4 </ul>
 5 <script>
 6     var btn = document.querySelector('button');
 7     var ul = document.querySelector('ul');
 8     btn.onclick = function() {
 9       // 建立一個新的li元素
10       var newLi = document.createElement('li');
11       // 追加
12       ul.appendChild(newLi);
13       // 設置內容
14       newLi.innerText = '我是新來的li';
15     };
16 </script>

（三）刪除元素

語法：父元素.removeChild(子元素); ip

confirm(); 提示是否確認刪除，返回布爾值。rem

 1 <ul>
 2 <li>我是li1</li>
 3 <li class="li2">我是li2</li>
 4 <li>我是li3</li>
 5 </ul>
 6 <script>
 7     var ul = document.querySelector('ul');
 8     var li2 = document.querySelector('.li2');
 9     // 移除第二li
10     ul.removeChild(li2);
11 </script>

（四）其餘元素

1. 插入元素

語法：父節點.insertBefore(新的節點,舊的子節點)字符串

2. 替換元素

語法：父節點.replaceChild(新的節點,舊的子節點)

3. 克隆元素

語法：元素.cloneNode(true或false); 返回一份新的克隆後的元素，默認值false

true，克隆該元素的全部內容
false，僅僅克隆外層標籤

 1 <ul>
 2     <li>我是li1</li>
 3     <li>我是li2</li>
 4     <li>我是li3</li>
 5 </ul>
 6 <div>
 7     <h2>我是div中的標題</h2>
 8     <span>我是span</span>
 9     <button>按鈕</button>
10     <p>段落</p>
11 </div>
12 
13 <script>
14     var ul = document.querySelector('ul');
15     var oldLi = ul.children[0];
16     // 建立一個新的li
17     var newLi = document.createElement('li');
18     newLi.innerText = '我是新的li';
19     // 【插入】
20     // ul.insertBefore(newLi,oldLi);
21     // 替換
22     // ul.replaceChild(newLi,oldLi);
23     // 【獲取div】
24     var div = document.querySelector('div');
25     // 【克隆】
26     // var newDiv = div.cloneNode(); // 默認是false，表示僅僅克隆外層標籤
27     var newDiv = div.cloneNode(true); // 如果true，會克隆該元素的全部內容
28     document.body.appendChild(newDiv);
29 </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。