快捷導(dǎo)航

使用JavaScript在html文檔內(nèi)添加新的元素節(jié)點(diǎn)

更新時(shí)間：2022年02月25日 09:12:22 作者：酷爾。

這篇文章主要介紹了使用JavaScript在html文檔內(nèi)添加新的元素節(jié)，主要打方式就是動(dòng)態(tài)的改變?cè)衕tml文檔結(jié)構(gòu)，下文詳細(xì)介紹內(nèi)容需要的可以參考一下

一、基本語(yǔ)法與解釋

1.在某元素附近創(chuàng)建一個(gè)新的元素節(jié)點(diǎn)

?// 將節(jié)點(diǎn)插入指定標(biāo)簽之后
?// 創(chuàng)建一個(gè)p標(biāo)簽對(duì)象
?var para = document.createElement("p");
?// 創(chuàng)建文本對(duì)象
?var node = document.createTextNode("這是一個(gè)新的段落。");
?// 將文本對(duì)象加入p標(biāo)簽對(duì)象
?para.appendChild(node);
?// 選出id=div1的標(biāo)簽
?var element = document.getElementById("div1");
?// 在該標(biāo)簽之后加上剛創(chuàng)建的p標(biāo)簽
?element.appendChild(para);
?// 將節(jié)點(diǎn)插到指定標(biāo)簽之前
?var para = document.createElement("p");
?var node = document.createTextNode("這是一個(gè)新的段落。");
?para.appendChild(node);
?var element = document.getElementById("div1");
?var child = document.getElementById("p1");
?element.insertBefore(para, child);

2.刪除標(biāo)簽

// 刪除存在的標(biāo)簽
?// 以下代碼是已知要查找的子元素，然后查找其父元素，再刪除這個(gè)子元素
?//（刪除節(jié)點(diǎn)必須知道父節(jié)點(diǎn)）：
?var parent = document.getElementById("div1");
?var child = document.getElementById("p1");
?parent.removeChild(child);

3.修改標(biāo)簽

// 替換標(biāo)簽
var para = document.createElement("p");
var node = document.createTextNode("這是一個(gè)新的段落。");
//將內(nèi)容添加進(jìn)標(biāo)簽
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
//將parent中的para標(biāo)簽替換為child
parent.replaceChild(para, child);

4.使用選擇器選出某一類標(biāo)簽

// 選出所有同一類型的標(biāo)簽 獲取HTMLCollection 對(duì)象。
? ? function myFunction() {
? ? ? ? // getElementsByTagName() 方法返回所有同一類型的標(biāo)簽
? ? ? ? var myCollection = document.getElementsByTagName("p");
? ? ? ? var i;
? ? ? ? for (i = 0; i < myCollection.length; i++) {
? ? ? ? ? ? // 對(duì)標(biāo)簽的屬性進(jìn)行修改
? ? ? ? ? ? myCollection[i].style.color = "red";
? ? ? ? }
? ? }

二、實(shí)際應(yīng)用

1.完整代碼

代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
? ? <body>
? ? ? ? <div id="div1">
? ? ? ? <p id="p1">這是一個(gè)段落。</p>
? ? ? ? <p id="p2">這是另外一個(gè)段落。</p>
? ? ? ? </div>
? ??
? ? <script>
? ? ? ? // 將節(jié)點(diǎn)插入指定標(biāo)簽之后
? ? ? ? // 創(chuàng)建一個(gè)p標(biāo)簽對(duì)象
? ? ? ? var para = document.createElement("p");
? ? ? ? // 創(chuàng)建文本對(duì)象
? ? ? ? var node = document.createTextNode("這是一個(gè)新的段落。");
? ? ? ? // 將文本對(duì)象加入p標(biāo)簽對(duì)象
? ? ? ? para.appendChild(node);
? ? ? ? // 選出id=div1的標(biāo)簽
? ? ? ? var element = document.getElementById("div1");
? ? ? ? // 在該標(biāo)簽之后加上剛創(chuàng)建的p標(biāo)簽
? ? ? ? element.appendChild(para);
? ? ? ? // 將節(jié)點(diǎn)插到指定標(biāo)簽之前
? ? ? ? var para = document.createElement("p");
? ? ? ? var node = document.createTextNode("這是一個(gè)新的段落。");
? ? ? ? para.appendChild(node);
? ? ? ? var element = document.getElementById("div1");
? ? ? ? var child = document.getElementById("p1");
? ? ? ? element.insertBefore(para, child);
? ? ? ? // 刪除存在的標(biāo)簽
? ? ? ? // 以下代碼是已知要查找的子元素，然后查找其父元素，再
? ? ? ? 刪除這個(gè)子元素（刪除節(jié)點(diǎn)必須知道父節(jié)點(diǎn)）：
? ? ? ? var parent = document.getElementById("div1");
? ? ? ? var child = document.getElementById("p1");
? ? ? ? parent.removeChild(child);
? ? ? ? // 替換標(biāo)簽
? ? ? ? var para = document.createElement("p");
? ? ? ? var node = document.createTextNode("這是一個(gè)新的段落。");
? ? ? ? para.appendChild(node);
? ? ? ? var parent = document.getElementById("div1");
? ? ? ? var child = document.getElementById("p1");
? ? ? ? parent.replaceChild(para, child);
? ? ? ? // 選出所有同一類型的標(biāo)簽 獲取HTMLCollection 對(duì)象。
? ? ? ? function myFunction() {
? ? ? ? ? ? // getElementsByTagName() 方法返回所有同一類型的標(biāo)簽
? ? ? ? ? ? var myCollection = document.getElementsByTagName("p");
? ? ? ? ? ? var i;
? ? ? ? ? ? for (i = 0; i < myCollection.length; i++) {
? ? ? ? ? ? ? ? // 對(duì)標(biāo)簽的屬性進(jìn)行修改
? ? ? ? ? ? ? ? myCollection[i].style.color = "red";
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
? ? </body>
</html>

2.運(yùn)行效果

三、注意事項(xiàng)

使用選擇器選出某一類標(biāo)簽獲取HTMLCollection 對(duì)象時(shí)
HTMLCollection 不是一個(gè)數(shù)組！
HTMLCollection 看起來(lái)可能是一個(gè)數(shù)組，但其實(shí)不是。
我們可以像數(shù)組一樣，使用索引來(lái)獲取元素。

HTMLCollection 無(wú)法使用數(shù)組的方法： valueOf(), pop(), push(), 或 join()
第二種篩選方法 NodeList
所有瀏覽器的 childNodes 屬性返回的是 NodeList 對(duì)象。
大部分瀏覽器的 querySelectorAll() 返回 NodeList 對(duì)象。

HTMLCollection 與 NodeList 的區(qū)別：

HTMLCollection 是 HTML 元素的集合。
NodeList 是一個(gè)文檔節(jié)點(diǎn)的集合。
NodeList 與 HTMLCollection 有很多類似的地方。
NodeList 與 HTMLCollection 都與數(shù)組對(duì)象有點(diǎn)類似，
可以使用索引 (0, 1, 2, 3, 4, ...) 來(lái)獲取元素。
NodeList 與 HTMLCollection 都有 length 屬性。
HTMLCollection 元素可以通過(guò) name，id 或索引來(lái)獲取。
NodeList 只能通過(guò)索引來(lái)獲取。
只有 NodeList 對(duì)象有包含屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)。

總結(jié)：
增刪改查元素節(jié)點(diǎn)的時(shí)候,一般用于信息管理系統(tǒng)。信息的統(tǒng)計(jì)。但是由于現(xiàn)在市場(chǎng)上有許多成熟的框架,我們一般也用不到。

到此這篇關(guān)于使用JavaScript在html文檔內(nèi)添加新的元素節(jié)點(diǎn)的文章就介紹到這了,更多相關(guān)JavaScript在html文檔內(nèi)添加新的元素節(jié)點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: