jquery append appendTo before after insertAfter insertBefore prepend prependTo用法區別
阿新 • • 發佈：2019-01-25
| 在匹配的元素之後插入內容。 |
$("button").click(function(){
$("p").after("<p>Hello world!</p>");
});
結果：
This is a paragraph.
Hello world!
| 在每個匹配的元素之前插入內容。 |
$("button").click(function(){
$("p").before("<p>Hello world!</p>");
});
結果：
Hello world!
This is a paragraph.
| 向匹配元素集合中的每個元素結尾插入由引數指定的內容 |
$("button").click(function(){
$("p").append(" <b>Hello world!</b>");
});
結果：
This is a paragraph. Hello world!
This is another paragraph. Hello world!
| 向目標結尾插入匹配元素集合中的每個元素。 |
$("button").click(function(){
$("<b>Hello World!</b>").appendTo("p");
});
結果：
This is a paragraph. Hello World!
This is another paragraph. Hello World!
| 把匹配的元素插入到另一個指定的元素集合的後面。 |
$("button").click(function(){
$("<span>Hello world!</span>").insertAfter("p");
});
結果：
這是一個段落。
你好！這是另一個段落。
你好| 把匹配的元素插入到另一個指定的元素集合的前面。 |
$("button").click(function(){
$("<span>Hello world!</span>").insertBefore("p");
});結果：
你好！
這是一個段落。
你好！這是另一個段落。
| 向匹配元素集合中的每個元素開頭插入由引數指定的內容。 |
$(".btn1").click(function(){
$("p").prepend("<b>Hello world!</b>");
});
結果：
Hello world! This is a paragraph.
Hello world! This is another paragraph.
| 向目標開頭插入匹配元素集合中的每個元素。 |
$(".btn1").click(function(){
$("<b>Hello World!</b>").prependTo("p");
});
結果：
Hello World!This is a paragraph.
Hello World!This is another paragraph.