JavaScriptHTMLDOM元素實現(xiàn)新增，編輯，刪除操作的示例分-創(chuàng)新互聯(lián)

這篇文章主要介紹JavaScript HTML DOM元素實現(xiàn)新增，編輯，刪除操作的示例分，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網站設計、網站建設、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的永濟網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

具體如下：

createElement，createTextNode，appendChild，insertBefore，removeChild，replaceChild

createElement

以下代碼是用于創(chuàng)建 <p> 元素:

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

createTextNode

為 <p> 元素添加文本節(jié)點：

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

appendChild（它用于添加新元素到尾部）

將文本節(jié)點添加到 <p> 元素中：

para.appendChild(node);

以上3個結合案例： 

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
<script>
var para = document.createElement("p"); //創(chuàng)建p標簽
var node = document.createTextNode("這是一個新的段落。"); //添加文本節(jié)點
para.appendChild(node); //向p標簽添加文本節(jié)點（內容）
var element = document.getElementById("div1");
element.appendChild(para); //添加到已存在的元素中
</script>

運行結果： 

 

insertBefore（新元素添加到開始位置）

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

運行結果： 

 

removeChild

要移除一個元素，你需要知道該元素的父元素。

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

運行結果：

 

replaceChild

使用 replaceChild() 方法來替換 HTML DOM 中的元素。

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div> 
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個新的段落。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

運行結果：

以上是“JavaScript HTML DOM元素實現(xiàn)新增，編輯，刪除操作的示例分”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享標題：JavaScriptHTMLDOM元素實現(xiàn)新增，編輯，刪除操作的示例分-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article44/cshdee.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、移動網站建設、動態(tài)網站、App設計、網站導航、品牌網站制作

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)