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

实例之前先说下会用到的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,用法比较简单,大家可以试试。

你可能感兴趣的:(Jquery工作常用实例)