Rumah > Artikel > hujung hadapan web > Bolehkah javascript menambah tag?

Bolehkah javascript menambah tag?

青灯夜游asal: 2022-01-19 11:02:203214semak imbas

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.

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>

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>

Bolehkah javascript menambah tag?

Nota:

Mula-mula buat nod li,
kemudian buat nod teks,
dan kemudian tambahkan Nod teks berada dalam nod li.
Akhir sekali masukkan nod li ke dalam senarai nod anak pertama.

[Cadangan berkaitan: tutorial pembelajaran javascript]

Atas ialah kandungan terperinci Bolehkah javascript menambah tag?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript li

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara mengklik butang untuk mengubah suai teks dengan JavaScriptArtikel seterusnya：Cara mengklik butang untuk mengubah suai teks dengan JavaScript

Artikel berkaitan

Lihat lagi