摘要:
下文使用jquery向html中添加元素的方法分享，如下所示:
实现思路:
使用jquery的append()
prepend()
before()
after()
方法即可向指定元素的指定位置上
添加html信息
例:
jquery 向元素中添加html信息的示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>maomao365.com-向html页面添加内容的示例</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script>
<style>
div{
margin:10px;
}
</style>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#p1").append(" new");
});
$("#btn2").click(function(){
$("#p2").prepend("new ");
});
$("#btn3").click(function(){
$("#p3").before("new ");
});
$("#btn4").click(function(){
$("#p4").after("new ");
});
});
</script>
</head>
<body>
<p>
maomao365.com <br />
jquery 向html页面添加内容的示例分享
</p>
<hr />
<p id="p1">maomao365.com</p>
<button id="btn1">后面添加内容</button>
<p id="p2">maomao365.com</p>
<button id="btn2">前面添加内容</button>
<p id="p3">maomao365.com</p>
<button id="btn3">后面添加内容</button>
<p id="p4">maomao365.com</p>
<button id="btn4">前面添加内容</button>
</body>
</html>
jquery向html中添加元素的四种方法分享