JavaScript HTML DOM 元素(節點)
創建新的 HTML 元素
創建新的 HTML 元素
如需向 HTML DOM 添加新元素,您必須首先創建該元素(元素節點),然後向一個已存在的元素追加該元素。
實例
這是一個段落。
這是另一個段落。
var para=document.createElement("p");
var node=document.createTextNode("這是一個新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
例子解析:
這段代碼創建新的
元素:
var para=document.createElement("p");
如需向
元素添加文本,您必須首先創建文本節點。這段代碼創建了一個文本節點:
var node=document.createTextNode("這是一個新段落。");
然後您必須向
元素追加這個文本節點:
para.appendChild(node);
最後您必須向一個已有的元素追加這個新元素。
這段代碼找到一個已有的元素:
var element=document.getElementById("div1");
以下代碼在已存在的元素後添加新元素:
element.appendChild(para);
刪除已有的 HTML 元素
以下代碼演示了如何刪除元素:
實例
這是一個段落。
這是另一個段落。
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
實例解析
這個 HTML 文檔含有擁有兩個子節點(兩個
元素)的
這是一個段落。
這是另一個段落。
找到 id="div1" 的元素:
var parent=document.getElementById("div1");
找到 id="p1" 的
元素:
var child=document.getElementById("p1");
從父元素中刪除子元素:
parent.removeChild(child);
這是常用的解決方案:找到您希望刪除的子元素,然後使用其 parentNode 屬性來找到父元素:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
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技術