Jquery工作常用实例——改变和追加html内容

最新推荐文章于 2024-08-11 18:40:36 发布

weixin_34127717

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量77

点赞数

文章标签： xhtml javascript python ViewUI

原文链接：https://my.oschina.net/adamboy/blog/28193

版权

2019独角兽企业重金招聘Python工程师标准>>>

实例之前先说下会用到的Jquery知识点，如下两个：

一：$(selector).html(content)能改变所匹配的 HTML 元素的内容（innerHTML）。

二：$(selector).append(content)能向所匹配的 HTML 元素内部追加内容。

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>改变HTML元素的内容</title>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#but1").click(function(){
			$("p").html("My name is Adam Li.");
		})
		$("#but2").click(function(){
				$("p").append("<b>This is remarked by Adam Li.</b>");
			})
	})
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<input id="but1" type="button" value="html" />
<input id="but2" type="button" value="append" />
</body>
</html>

如上所示，当我们点击"html"按纽时，将会把所有段落p标签内的内容改为"My name is Adam Li"，当我们点击"append"时将向p标签中的内容追加"This is remarked by Adam Li"并加粗，详细使用情况大家可以动手试试，记得要先引入Jquery库，否则效果不能显示。

当然，Jquery操作html的函数还有很多，比如$(selector).prepend(content)：向被选元素的（内部）HTML “预置”（Prepend）内容，$(selector).after(content)：在被选元素之后添加 HTML，$(selector).before(content)：在被选元素之前添加 HTML，用法比较简单，大家可以试试。

转载于:https://my.oschina.net/adamboy/blog/28193