jquery如何向html中添加元素呢?


摘要:
下文使用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中添加元素的四种方法分享

jquery向html中添加元素的四种方法分享