jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
尝试一下 »
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：
实例
function afterText(){
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本}
尝试一下 »
Prkom
prk***921@163.com
那有木有考虑过append/prepend和after/before有什么区别呢？
append
<p> <span class="s1">s1</span></p><script>$("p").append('<span class="s2">s2</span>');</script>结果是这样的:after
<p> <span class="s1">s1</span></p><script>$("p").after('<span class="s2">s2</span>');</script>结果是这样的:
总结：
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。
Prkom
prk***921@163.com
onsunsl
ons***l@foxmail.com
参数可以是个 list:
function afterText(){ var txt1="<b>I </b>"; // 使用 HTML 创建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="jQuery!"; $("img").after([txt1,txt2,txt3]); // 在图片后添加文本}