jQuery添加元素

主要涉及到下面几个方法

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

一、append(),preappend()

 强调的是元素内部操作。

//通过元素选择器获取元素，并对元素进行追加操作 
$(document).ready(function(){ 
  $("#btn1").click(function(){
     $("p").append(" <b>追加文本</b>。");
   });

  $("#btn2").click(function(){
    $("ol").append("<li>追加列表项</li>");
  });
});

//通过元素选择器获取元素，并在元素前面加入内容
$(document).ready(function(){
	$("#btn1").click(function(){
		$("p").prepend("<b>在开头追加文本</b>。 ");
	});
	$("#btn2").click(function(){
		$("ol").prepend("<li>在开头添加列表项</li>");
	});
});

除此之外，还可以在body，或者div容器等追加内容，或者新的元素。

	function appendTest(){
        var txt1=document.createElement("p");
	    txt1.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM
        $("#div1").append(txt1);
    }

    
   ...
    <div id="div1"></div>
    <button onclick="appendTest()">点击</button>

 二、after(),before()用法与前面两个类似，不同之处是。这两个方法强调的是元素外部添加内容或者元素