第四周作业-jquery的文档处理（部分）

Posted 2020-07-04 小玄影123

部分简单测试，工具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插入到标签之前