當前位置:
首頁 > 知識 > JavaScript HTML DOM 元素(節點)

JavaScript HTML DOM 元素(節點)

創建新的 HTML 元素



創建新的 HTML 元素

如需向 HTML DOM 添加新元素,您必須首先創建該元素(元素節點),然後向一個已存在的元素追加該元素。

實例

這是一個段落。

這是另一個段落。

JavaScript HTML DOM 元素(節點)



例子解析:

這段代碼創建新的

元素:

var para=document.createElement("p");

如需向

元素添加文本,您必須首先創建文本節點。這段代碼創建了一個文本節點:

var node=document.createTextNode("這是一個新段落。");

然後您必須向

元素追加這個文本節點:

para.appendChild(node);

最後您必須向一個已有的元素追加這個新元素。

這段代碼找到一個已有的元素:

var element=document.getElementById("div1");

以下代碼在已存在的元素後添加新元素:

element.appendChild(para);



刪除已有的 HTML 元素

以下代碼演示了如何刪除元素:

實例

這是一個段落。

這是另一個段落。



實例解析

這個 HTML 文檔含有擁有兩個子節點(兩個

元素)的

元素:

這是一個段落。

這是另一個段落。

找到 id="div1" 的元素:

var parent=document.getElementById("div1");

找到 id="p1" 的

元素:

var child=document.getElementById("p1");

從父元素中刪除子元素:

parent.removeChild(child);

JavaScript HTML DOM 元素(節點)

這是常用的解決方案:找到您希望刪除的子元素,然後使用其 parentNode 屬性來找到父元素:

var child=document.getElementById("p1");

child.parentNode.removeChild(child);



JavaScript HTML DOM 元素(節點)

HTML DOM

在我的 JavaScript的 HTML DOM 部分,您已經學到了:

  • 如何改變 HTML 元素的內容 (innerHTML)

  • 如何改變 HTML 元素的樣式 (CSS)

  • 如何對 HTML DOM 事件作出反應

  • 如何添加或刪除 HTML 元素

如果能夠在不引用父元素的情況下刪除某個元素,就太好了。

不過很遺憾。DOM 需要清楚您需要刪除的元素,以及它的父元素。

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

JavaScript HTML DOM-改變 HTML
JavaScript 函數調用
JavaScript 閉包
JavaScript編程 HTML DOM
JavaScript 編程JSON

TAG:程序員小新人學習 |

您可能感興趣

Shader Graph著色器視圖自定義節點API:Code Function Node
OK Blockchain Capital宣布加入EOS超級節點競選
Hum Gene Ther:中國團隊基於CRISPR/Cas9基因編輯阻斷HIV多個關鍵節點
Alphacoin Fund宣布參選CyberMiles 超級節點
OK Blockchain Capital負責人田穎:未來每個EOS節點就是一個生態
Arm和三星計劃將Artisan POP IP合作擴展至7LPP和5LPE節點
SM-Optics推出首款FLEXSET晶元,為光學微節點奠定基礎
EOS超級節點Dmitri:構建DAPP戰略服務生態
ICO評測之Path.Network:基於區塊鏈的節點監控平台
Truffle 3.0部署智能合約至Ethereum節點
從零搭建kubernetes多節點cluster
Kubernetes1.14 版增加了雲原生平台的Windows節點支持
Bitcoin.org所有者宣布推出新型全節點BCH客戶端
《Fate/Grand Order》玉藻貓手辦:細節點綴讓她更加迷人
Python腳本建立ABAQUS節點集的方法
EOS超級節點候選者eosONO受邀韓國EOSYS和EOSeuol出席峰會
金色爆裂紋細節點綴!Air Jordan 11「Olive Luxe」發售詳情釋出!
XPath 節點
IMEOS:「EOS Node」是一個不存在的EOS節點
台積電首次在批量生產的7nm節點上推出Wafer-on-Wafer技術