向Dom中新增元素與文字節點的屬性和方法

這些屬性由js字串建立，向dom中新增節點。

<

body
>
<
div 
id="a"
>aaa
div>
<
div 
id="b"
>
div>
<
div 
id="c"
>
div>
<
div 
id="d"
>
div>
<
div 
id="e"
>
div>
<
script
>
//建立strong元素與文字節點新增到dom
document.getelementbyid('a
').innerhtml ='
aaa'
; 
//建立strong元素替換div#b
document.getelementbyid('b
').outerhtml ='
changed'
//建立文字節點並更新div#c中的內容
document.getelementbyid('c
').textcontent ='
cc'; document.getelementbyid('d
').innertext ='
dd'; 
//建立文字節點並替換div#d
document.getelementbyid('e
').outertext ='
bold'
; console.log(document.body.innerhtml);
script
>
body
>

輸出：aaa

changed

ccdd

bold

總結：1）inner是在已有元素內新建立元素或文字節點 outer則是以新建立的元素或文字節點替換

2）html建立的是元素和文字節點 會被瀏覽器自動解析為html標籤 text則被完全解釋為文字 從輸出5看出 新增的標籤符號被轉換為轉義字元

3）textcontext與innertext都用來構造文字節點

insertadjacenthtml()方法僅在element節點上有效

<

body
>
<
strong 
id="s"
>l
strong
>
<
script
>
varins 
=document.getelementbyid('s
');//節點插入開標籤之前
ins.insertadjacenthtml(
'beforebegin', 
'h');
//開標籤之後
ins.insertadjacenthtml(
'afterbegin', 
'e');
//閉標籤之前
ins.insertadjacenthtml(
'beforeend', 
'l');
//閉標籤之後
ins.insertadjacenthtml(
'afterend', 
'o');
console.log(document.body.innerhtml);
/*hello*/
script
>
body
>

區別：1）innertext受樣式影響並會觸發頁面重排（reflow），textcontext 不會

2）innertext由於受到樣式影響不會返回隱藏元素（visibility: hidden/display: none）的文字，textcontent會

DOM中元素節點 屬性節點 文字節點的理解

節點資訊 每個節點都擁有包含著關於節點某些資訊的屬性。這些屬性是 nodename 節點名稱 nodevalue 節點值 nodetype 節點型別 nodetype nodetype 屬性可返回節點的型別。最重要的節點型別是 元素型別 節點型別 元素 element node 1 屬性 attri...

DOM中元素節點 屬性節點 文字節點的理解

每個節點都擁有包含著關於節點某些資訊的屬性。這些屬性是 nodetype 屬性可返回節點的型別。最重要的節點型別是 元素型別 節點型別元素1 屬性2文字3 注釋8文件9 在實際應用中，經常用到的就是元素節點 屬性節點和文字節點了，下面我們通過小段 進行講解 1 元素節點 john doejack j...

DOM學習之如何新增元素（節點）

推測，新增應該有兩種型別，一種是建立的新的 在dom樹之外的元素 節點新增到dom樹中 一種是將已存在dom樹中的元素 節點新增到其它元素 節點 第一種 建立新元素 節點 通過 createelement 建立新元素節點，如 let div document.createelement div 就建...