首頁 > web前端 > js教程 > javascript能增加標籤嗎

javascript能增加標籤嗎

青灯夜游
發布: 2022-01-19 11:02:20
原創
3248 人瀏覽過

javascript能增加標籤,方法:1、使用「document.createElement("標籤名")」語句建立新標籤節點;2、使用insertBefore()或appendChild()函數在指定子元素節點前或後插入新標籤節點。

javascript能增加標籤嗎

本教學操作環境: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>
登入後複製

javascript能增加標籤嗎

注意:

  • 先建立一個節點,

  • 然後建立一個文字節點,

  • 然後將文字節點新增到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>
登入後複製

javascript能增加標籤嗎

##注意:

  • 先建立一個li節點,

  • 然後建立一個文字節點,

  • 然後加入文字節點的在li節點。

  • 最後在第一個子節點清單插入li節點。

【相關推薦:

javascript學習教學

以上是javascript能增加標籤嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板