jQuery的HTML操作

最新推荐文章于 2022-09-26 10:51:26 发布

原创最新推荐文章于 2022-09-26 10:51:26 发布 · 521 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery #generator #button #function

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文通过jQuery脚本展示了如何使用$.html(), $.append(), $.prepend(), $.after()和$.before()方法来修改HTML内容，包括文本替换、元素追加、移位等操作，并提供了具体的代码示例。

$(selector).html(content); 修改HTML内容。

$(selector).append(content); 将内容添加所有匹配元素的后面。

$(selector).prepend(content); 将内容添加所有匹配元素的前面。

$(selector).after(content); 将内容添加所有匹配元素的下一行。

$(selector).before(content); 将内容添加所有匹配元素的前一行。

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src="jquery-1.6.4.js"></script>
  <script type="text/javascript">
	$(document).ready(function(){
		$("button").click(function(){
			$("#p1").html("This is another content.");
			$("#p2").append("This is another content.");
			$("#p3").prepend("This is another content.");
			$("#p4").after("This is another content.");
			$("#p5").before("This is another content.");
		});
	});
  </script>
 </HEAD>

 <BODY>
  <button type="button">Change</button>
  <p id="p1">This is a paragraph with little content.</p>
  <p id="p2">This is a paragraph with little content.</p>
  <p id="p3">This is a paragraph with little content.</p>
  <p id="p4">This is a paragraph with little content.</p>
  <p id="p5">This is a paragraph with little content.</p>
 </BODY>
</HTML>