jQuery拼接页面元素

拼接元素

append/prepend

在选择元素内部嵌入

after/before

在元素外面追加

// 拼接元素

var a='<a>这是一个拼接元素</a>';
var div="<div class='divClass'>这是一个div</div>";

append()

在被选元素的结尾，插入内容
// append
$(‘.divClass’).append(a);

// 效果

<div>
    这是一个div
    <a>这是一个拼接元素</a>
</div>

prepend()

在被选元素的开头，插入内容
// prepend
$(‘.divClass’).prepend(a);

// 效果

<div>
    <a>这是一个拼接元素</a>
    这是一个div
</div>

after()

在被选元素之后，插入内容
// after
$(‘.divClass’).after(a);

// 效果

<div>
    这是一个div
</div>
<a>这是一个拼接元素</a>

before()

在被选元素之前，插入内容
// before
$(‘.divClass’).before(a);

// 效果

<a>这是一个拼接元素</a>
<div>
    这是一个div
</div>

append()和 prepend()方法

添加若干新元素
可以通过参数，接收无限数量的新元素

var txt1="<p>文本</p>";     
var txt2=$("<p></p>").text("文本"); 
var txt3=document.createElement("p");
txt3.innerHTML="文本";              
$("body").append(txt1,txt2,txt3); 

after()和 before()方法

添加若干新元素
可以通过参数，接收无限数量的新元素

var txt1="<p>文本</p>";     
var txt2=$("<p></p>").text("文本"); 
var txt3=document.createElement("p");
txt3.innerHTML="文本";              
$("body").after(txt1,txt2,txt3);