部分简单测试,工具sublime text ,firebug
append 向每个匹配的元素内部追加内容。
eg:
<p id=‘p1‘>文本</p> <script type="text/javascript"> var text="<h2>这是一个h2</h2>" $(function(){ $("#p1").append($(text)); }); </script>
执行完上述代码后由firebug内存中标签信息变为
<p id="p1"> 文本 <h2>这是一个h2</h2> </p>
jquery中append函数是将文本插入指定标签内。
appendTo:把所有匹配的元素追加到另一个指定的元素元素集合中
<p id=‘p2‘>文本</p> <h2>a</h2> <h2>b</h2> <script type="text/javascript"> $(function(){ $("#p2").appendTo($("h2")); }); </script>
在页面中显示效果代码如下
<h2> a <p id="p2">文本</p> </h2> <h2> b <p id="p2">文本</p> </h2>
和append相反的是,appendTo是把原来的标签剪切并复制进指定标签中
prepend:向每个匹配的元素内部前置内容。
<p id=‘p3‘>文本</p> <h3>a</h3> <h3>b</h3> <script type="text/javascript"> $(function(){ $("#p3").prepend($("h3")); }); </script>
页面效果
<p id="p3"> <h3>a</h3> <h3>b</h3> 文本 </p>
得到的结果和append一样
prependTo:把所有匹配的元素前置到另一个、指定的元素元素集合中。
<p id=‘p4‘>文本</p> <h1>a</h1> <h1>b</h1> <script type="text/javascript"> $(function(){ $("#p4").prependTo($("h1")); }); </script>
页面效果
<h1> <p id="p4">文本</p> a </h1> <h1> <p id="p4">文本</p> b </h1>
效果和appendTo一样
after:在每个匹配的元素之后插入内容。
<p id=‘p5‘>文本</p> <script type="text/javascript"> $(function(){ $("#p5").after($("<h2>这是一个after测试</h2>")); }); </script>
测试结果
<p id="p5">文本</p> <h2>这是一个after测试</h2>
after是追加到标签体之后,对原来的标签无内容交集
before:在每个匹配的元素之前插入内容
<p id=‘p6‘>文本</p> <script type="text/javascript"> $(function(){ $("#p6").before($("<h2>这是一个before测试</h2>")); }); </script>
页面效果
<p id="p5">文本</p> <h2>这是一个before测试</h2>
before插入到标签之前
时间: 2024-11-10 13:41:26