js節點的建立新增刪除

2022-03-21 14:49:50 字數 3792 閱讀 4243

var ul = document.getelementbyid('

box'

);

//建立節點

//建立節點

var li1 = document.createelement('li'

);

var li2 = document.createelement('li'

);

//innertext 只設定文字

li1.innertext = '

123'

;

元素物件.inner文字=『內容』

//建立節點

var li1 = document.createelement('li'

);

var li2 = document.createelement('li'

);

////

innertext 只設定文字

li1.innertext = '123';

li1.innertext = 'mcw'

;使用兩次,會被覆蓋掉

//建立節點

var li1 = document.createelement('li'

);

var li2 = document.createelement('li'

); li1.innerhtml = '

123'

; li1.setattribute(

'class

','active');

console.log(li1.children);

li1.children[

0].style.color = '

red'

; li1.children[

0].style.fontsize = '

20px

';1)建立dom物件    document.getelementbyid('box');

2)建立標籤物件;   document.createelement('li')

3)標籤物件插入文字內容:li1.innertext=『內容』;

4)標籤物件插入html,插入子標籤:  li1.innerhtml = '123';

5)根據索引獲取子標籤位置並設定樣式:  li1.children[0].style.color = 'red';

li1.children只有乙個元素,可以索引取值。

var ul = document.getelementbyid('

box'

);

//建立節點

var li1 = document.createelement('li'

);

var li2 = document.createelement('li'

);

////

innertext 只設定文字

= '123';

li1.innerhtml = '

123'

; li1.setattribute(

'class

','active');

console.log(li1.children);

li1.children[

0].style.color = '

red'

; li1.children[

0].style.fontsize = '

20px';

第乙個'

; ul.insertbefore(li2,li1);//如果li1不存在或沒有追加進去,那麼此條不執行

var ul = document.getelementbyid('

box'

);

//建立節點

var li1 = document.createelement('li'

);

var li2 = document.createelement('li'

); li1.innerhtml = '

123'

; li1.setattribute(

'class

','active');

console.log(li1.children);

li1.children[

0].style.color = '

red'

; li1.children[

0].style.fontsize = '

20px';

//

// li2.innerhtml = '

第乙個'

for迴圈批量生成標籤:

將模擬從資料庫拿來的資料放在生成的標籤裡,並給標籤寫好css樣式:

這樣就生成了這個列表,資料庫有多少個顯示多少個。

JS新增和刪除節點

1 doctype html 2 html 3 head 4 meta charset utf 8 5 title 無標題文件 title 6 div id div1 7 p id p1 這是乙個段落 p 8 p id p2 這是另乙個段落 p 9div 10head 1112 body 13 sc...

js中建立 新增 刪除 移動 複製和查詢(子)節點

1 建立新節點 createdocumentfragment 建立乙個dom片段 createelement x 建立乙個具體的元素 createtextnode 建立乙個文字節點 2 新增 移除 替換 插入 removechild 移除 replacechild 替換 insertbefore 插...

js深拷貝,刪除複製新增節點dom

業務如下 dom中繫結迴圈資料 深拷貝複製 copythisdom val,index 刪除節點 清除某一條資料val代表選定的當前資料,index代表資料下標 closethisdom val,index 新增節點 直接運算元組物件,會有其他新增方式 this.treatmentmethoddat...