javascript能增加標籤嗎
- 青灯夜游原創
- 2022-01-19 11:02:203232瀏覽
javascript能增加標籤，方法：1、使用「document.createElement("標籤名")」語句建立新標籤節點；2、使用insertBefore()或appendChild()函數在指定子元素節點前或後插入新標籤節點。
本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
節點的插入分成兩種情況：在元素子節點清單的後面附加子節點和在元素某個子節點前面插入子節點:
第一種情況呼叫：
element.appendChild（子節點）;#第二種情況呼叫：
element.insertBefore（新節點，現有節點）。
範例1：在元素子節點清單的後面附加子節點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p id="demo">单击按钮将项目添加到列表中</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>
</body>
</html>
注意：
先建立一個節點，
然後建立一個文字節點，
然後將文字節點新增到LI節點上。
最後將節點加入到清單中。
範例2：在元素某個子節點前面插入子節點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p id="demo">单击按钮插入一个项目列表</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
var newItem = document.createElement("LI")
var textnode = document.createTextNode("Water")
newItem.appendChild(textnode)
var list = document.getElementById("myList")
list.insertBefore(newItem, list.childNodes[0]);
}
</script>
</body>
</html>
- 先建立一個li節點,
- 然後建立一個文字節點,
- 然後加入文字節點的在li節點。
- 最後在第一個子節點清單插入li節點。
以上是javascript能增加標籤嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn