Bagaimana untuk mengubah suai kandungan nod dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mengubah suai kandungan nod dalam jquery

青灯夜游

Lepaskan： 2022-03-22 19:42:59

asal

2097 orang telah melayarinya

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"".

Bagaimana untuk mengubah suai kandungan nod dalam jquery

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>

Salin selepas log masuk

Bagaimana untuk mengubah suai kandungan nod dalam jquery

Kaedah 2: Gunakan html()

<🎜 Kaedah >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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!