Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengubah suai kandungan nod dalam jquery

Bagaimana untuk mengubah suai kandungan nod dalam jquery

青灯夜游asal: 2022-03-22 19:42:592069semak imbas

Cara mengubah suai kandungan nod dalam jquery: 1. Gunakan text() untuk mengubah suai kandungan teks nod Sintaks ialah "node object.text("new text content""; html() untuk mengubah suai kandungan nod Secara langsung menulis semula kandungan nod, sintaksnya ialah "node object.html("kandungan nod baharu"".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

jquery mengubah suai kandungan nod

Kaedah 1: Gunakan text()

kaedah text() menetapkan atau mengembalikan kandungan teks elemen yang dipilih.

Apabila kaedah ini digunakan untuk mengembalikan kandungan, kandungan teks semua elemen yang sepadan dikembalikan (penanda HTML dialih keluar).
Apabila kaedah ini digunakan untuk menetapkan kandungan, kandungan semua elemen padanan akan ditindih.

Contoh:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").text("Hello world!");
				});
			});
		</script>
	</head>
	<body>

		<button>修改所有p元素的文本内容</button>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>

	</body>
</html>

Bagaimana untuk mengubah suai kandungan nod dalam jquery

Kaedah 2: Gunakan html()

html() menetapkan atau mengembalikan kandungan (innerHTML) elemen yang dipilih.

Apabila kaedah ini digunakan untuk mengembalikan kandungan, kandungan elemen padanan pertama dikembalikan.
Apabila kaedah ini digunakan untuk menetapkan kandungan, kandungan semua elemen padanan akan ditindih.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").html("Hello <b>world!</b>");
				});
			});
		</script>
	</head>
	<body>

		<button>修改所有P元素的内容</button>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>

	</body>
</html>

Bagaimana untuk mengubah suai kandungan nod dalam jquery

Pengetahuan lanjutan: Perbandingan html() dan teks()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            var strHtml = $("p").html();
            var strText = $("p").text();
            $("#txt1").val(strHtml);
            $("#txt2").val(strText);
        })
    </script>
	</head>
	<body>
		<p><strong style="color:hotpink">PHP中文网</strong></p>
		html()是：<input id="txt1" type="text" /><br />
		text()是：<input id="txt2" type="text" />
	</body>
</html>

Bagaimana untuk mengubah suai kandungan nod dalam jquery

Seperti yang dapat dilihat daripada contoh ini, html() memperoleh semua kandungan di dalam elemen, manakala text() hanya memperoleh kandungan teks.

Perbezaan antara dua kaedah html() dan text() boleh dibandingkan dengan jelas daripada jadual berikut.

kod HTML	html()	text()
Tapak web PHP Cina	Bahasa Cina PHP laman web	tapak web PHP Cina
< ;div> tapak web PHP Cina	Tapak web PHP Cina	tapak web PHP Cina
		(rentetan kosong)

HTML代码	html()	text()
PHP中文网	PHP中文网	PHP中文网
PHP中文网	PHP中文网	PHP中文网
		（空字符串）

[Pembelajaran yang disyorkan:

tutorial video jQuery, pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai kandungan nod dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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：Apakah kaedah yang ada untuk melintasi nod dalam jquery?Artikel seterusnya：Apakah kaedah yang ada untuk melintasi nod dalam jquery?

Artikel berkaitan

Lihat lagi