简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

js怎么添加元素新节点？（图文详解）

青灯夜游
Lepaskan： 2018-10-15 14:46:17
asal
5489 orang telah melayarinya

js怎么添加元素新节点？本篇文章就给大家介绍在js中如何实现添加元素新节点的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

js要添加元素新节点，就必须先创建好新的元素节点，然后在把新的元素节点添加到html页面上。下面我们通过一个简单的代码示例来详细了解JavaScript要添加元素新节点的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js添加元素新节点</title>
		<style>
			#div{
				width: 200px;
				height: 150px;
				border: 2px solid red;
				margin: 50px auto;
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<div id="div">
			<p id="p1">这是一个段落</p>
			<p id="p2">这是另一个段落</p>
		</div>

		<script>
			var para = document.createElement("p");
			var node = document.createTextNode("这是一个新的段落。");
			para.appendChild(node);

			var element = document.getElementById("div");
			element.appendChild(para);
		</script>
	</body>
</html>
Salin selepas log masuk

效果图：

3.jpg

我们来分析一下：

1、 document.createElement("p")表明创建一个新的p标签节点（第三个p标签）；
      document.createTextNode()表明创建新的文本内容节点：这是一个新的段落。

2、使用para.appendChild(node);把创建好的文本内容（节点）添加到创建好的新p标签（节点）里；
     使用appendChild(para)把创建好的p标签（节点）及其内容（节点）添加（插入）到id="div"的盒子里，在html页面上显示。

总结：以上就是js怎么添加元素新节点的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程，jQuery视频教程，bootstrap教程！

Atas ialah kandungan terperinci js怎么添加元素新节点？（图文详解）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
Tambah elemen
sumber：php.cn
Artikel sebelumnya：CodeSmith生成实体类是如何实现的 Artikel seterusnya：JavaScript实现插入节点方法总结
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Bagaimana untuk mengakses contoh $vuetify dalam fungsi persediaan Adakah terdapat cara untuk mengakses $vuetify (dan mana-mana global tambahan lain) dalam f...
daripada 2023-11-17 17:47:45
0
1
366
Modul tidak ditakrifkan dalam projek Vue Saya baru sahaja mencipta aplikasi Vue baharu dengan menjalankan npmini tvue@latest sepert...
daripada 2023-11-17 12:38:53
0
2
394
Hapuskan pemberitahuan dalam WooCommerce yang menyatakan "Daftar keluar tidak boleh dilakukan apabila troli kosong". Apakah kod yang perlu saya tambah dalam functions.php untuk mengalih keluar "Tidak bo...
daripada 2023-11-17 11:41:02
0
1
361
Bagaimana untuk menambah aksara baris baharu (watak baris baharu) dalam fail XML? Saya mempunyai fail XML dan saya ingin membungkus teks "Sample Text 123" seperti...
daripada 2023-11-16 16:42:38
0
1
199
Menangkap pengecualian Guzzle Saya cuba menangkap pengecualian dalam set ujian yang dijalankan pada API yang saya bangun...
daripada 2023-11-16 14:36:03
0
12
290
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！