day16-jQuery文档处理-优快云博客

一、前言

　　今天我们来学习一下文档处理，这个在我们工作也经常用到，比如我们需要插入一行数据，比如说要插入一个标签，等等，这个会经常用到的。下面只是写了经常用的，如果想看更多：http://jquery.cuishifeng.cn/ 的文档处理部分。

二、操作的html

<body>
    <input id="t1" type="text"/>
    <input id="a1" type="button" value="添加">
    <input id="a2" type="button" value="删除">
    <input id="a3" type="button" value="复制">

    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
            //js代码
    </script>
</body>

效果图：

三、内部插入

3.1、append

说明：向每个匹配的元素内部追加内容。

$("#a1").click(function(){
    var v = $("#t1").val();
    var temp = "<li>" + v + "</li>";
    $("#u1").append(temp); //在尾部添加
});

3.2、prepend

说明：向每个匹配的元素内部前置内容。

$("#a1").click(function(){
    var v = $("#t1").val();
    var temp = "<li>" + v + "</li>";
    $("#u1").prepend(temp); //在前置添加
});

四、外部插入

4.1、after

说明：在每个匹配的元素之后插入内容。

$("#a1").click(function(){
    var v = $("#t1").val();
    var temp = "<li>" + v + "</li>";
    $("#u1").after(temp); //在当前标签的外部的后面插入
});

4.2、before

说明：在每个匹配的元素之前插入内容。

$("#a1").click(function(){
    var v = $("#t1").val();
    var temp = "<li>" + v + "</li>";
    $("#u1").before(temp); //在当前标签的外部的之前插入
});

五、删除

5.1、remove

说明：从DOM中删除所有匹配的元素。

$("#a2").click(function(){
    var index = $("#t1").val();
    $("#u1 li").eq(index).remove(); //删除所有内容，包括标签
});

5.2、empty

说明：删除匹配的元素集合中所有的子节点。

$("#a2").click(function(){
    var index = $("#t1").val();
    $("#u1 li").eq(index).empty()；//只清空内容，不删除标签
});

六、复制

6.1、clone

说明：克隆匹配的DOM元素并且选中这些克隆的副本。

$("#a3").click(function(){
    var index = $("#t1").val();
    var v = $("#u1 li").eq(index).clone(); //复制当前标签
    $("#u1").append(v);
});

转载于:https://www.cnblogs.com/zhangqigao/articles/8391873.html