Bolehkah javascript menambah tag?-tutorial js-php.cn

Bolehkah javascript menambah tag?

青灯夜游

Lepaskan： 2022-01-19 11:02:20

asal

3235 orang telah melayarinya

Javascript boleh menambah label Kaedah: 1. Gunakan pernyataan "document.createElement("label name")" untuk mencipta nod label baharu 2. Gunakan fungsi insertBefore() atau appendChild() sebelum menentukan nod elemen anak atau masukkan nod label baharu selepas itu.

Bolehkah javascript menambah tag?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3. Terdapat dua situasi untuk memasukkan nod

: menambahkan nod anak selepas senarai nod anak elemen dan memasukkan nod anak di hadapan nod anak elemen:

Cara pertama Panggilan kes: element.appendChild（子节点）;
Panggilan kes kedua: element.insertBefore（新节点，现有节点）.

Contoh 1: Tambahkan nod anak selepas senarai nod anak elemen

<!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>

Salin selepas log masuk

Bolehkah javascript menambah tag?

Nota :

Mula-mula buat nod,
kemudian buat nod teks,
kemudian tambah Nod teks ditambah pada nod LI.
Akhir sekali tambahkan nod pada senarai.

Contoh 2: Sisipkan nod kanak-kanak di hadapan nod kanak-kanak elemen

<!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>

Salin selepas log masuk

Bolehkah javascript menambah tag?