append vs appendTo()

append() 定义和用法

      append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

语法

$(selector).append(content)

 

参数	描述
content	必需。规定要插入的内容（可包含 HTML 标签）。

使用函数来附加内容

使用函数在指定元素的结尾插入内容。

语法

$(selector).append(function(index,html))

参数	描述
function(index,html)	必需。规定返回待插入内容的函数。 index - 可选。接收选择器的 index 位置。 html - 可选。接收选择器的当前 HTML。

示例：

JavaScript代码
<script type="text/javascript" src="js/jquery.js" language="javascript"></script>  
<script type="text/javascript" language="javascript">  
$(document).ready(function(){  
        $("p").append("<b>Hello</b>");   
 
})  
</script> 

XML/HTML代码
<p>I would like to say: </p>   

将返回[ <p>I would like to say: <b>Hello</b></p> ]

 

HTML代码为<p>I come from </p><p>I love  </p>

向所有p标签中追加一个单词china，则写法为 $("p").append("china");

结果为：<p>I come from china</p><p>I love china </p>

 

appendTo(expr) 定义和用法

把所有匹配的元素追加到指定的元素元素集合中。

语法

$(content).appendTo(selector)

 

参数	描述
content	必需。规定要插入的内容（可包含 HTML 标签）。
selector	必需。规定把内容追加到哪个元素上。

 

 

示例：

HTML代码为<b>I love china </b><p></p>

把标签b追加到p元素中，写法为$("b").appendTo("p");

结果为：><p><b>I love china </b></p>

 

JavaScript代码
<script type="text/javascript" src="js/jquery.js" language="javascript"></script>  
<script type="text/javascript" language="javascript">  
$(document).ready(function(){  
        $("p").appendTo("#foo");   
})  
</script> 

XML/HTML代码
<p>I would like to say: </p><div id="foo"></div>  

将返回：<div id="foo"><p>I would like to say: </p></div>