jquery之文档操作 | 易学教程

　　append(content|fn) 向每个匹配的元素内部添加内容(元素内部)

　　appendTo(content) 把所有匹配的元素追加到另一个指定的元素中(元素内部)

　　prepend(content) 向每个匹配元素内部前置内容，是向所有匹配元素内部前置内容的最好方法(元素内部)

　　prependTo(content) 把所有匹配的元素前置到另一个指定的元素集合中(元素内部)

　　after(content|fn) 在每个匹配的元素之后插入内容(元素外部)，$(A).after(B)的操作，把B插入到A后面

　　before(content|fn) 在每个匹配的元素之前插入内容(元素外部)

　　insertAfter(content) 把所有匹配的元素插入到插入到另一个指定的元素集合后面

　　empty() 删除所有匹配元素的子元素

　　remove([expr]) 删除所有匹配元素

HTM示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--HTML区域-->
    <b>好亮</b>

    <h1>第一个标题</h1>
    <img src="57eb.jpg">57eb.jgp
    <div class="nav-2014">nav-2014
        <div class="w">
            <div class="w-spacer"></div>
            <div class="categorys">
                <div class="dt" style="color: red;font-size: 25px">家用电器分类</div>
                <div class="dp" style="color: green;font-size: 12px;">家用电器价格</div>
                <img src="rB3.jpg">
            </div>
            <span class="hr">11</span>
            <div class="navitems-2014 chr1 chr2">
                <div id="treasure"></div>
                <span class="clr clr1"></span>
                <span class="chr"></span>
                男：<input type="checkbox" value="nan">
                女:<input type="checkbox"  value="nv">
                <input type="text" value="2">
                <input type="text" value="3">
            </div>
            <ul>
                <li>第一行</li>
                <li>第二行</li>
                <li>第三行</li>
                <li>第四行</li>
            </ul>
        </div>
    </div>
    <h2>第二个标题</h2>
    <p>第一段</p>
    <p>第二段</p>
</body>
</html>

　　jquery举例

    <script src="jquery-3.1.0.js"></script>
    <script>
//        向第一个p元素内部添加b标签
        $("p:first").append("<b>是红色</b>")
//        把最后一个p元素添加到li元素中
        $("p:last").appendTo("li")
//        向dt类元素内容前插入最后一个p元素内容
        $(".dt").prepend($("p:last"))
//        将第一个img元素插入到li元素前部
        $("li").prepend($("img")[0])
//        把dp元素插入到所有li元素前部
        $(".dp").prependTo($("li"))
//        向span元素内容后面插入b元素
        $("span").after("<b>insert after</b>")
//        before与之相似
//        将li的第一个元素插入到li的最后一个元素后面
        $("li:first").insertAfter($("li:last"))
//        insertBefore与insertAfter相反
//        删除ul元素的所有子节点
        $("ul").empty()
//        删除所有input元素
        $("input").remove()
//        删除所有div标签中类名为dt的元素,与remove功能一致？
        $("div").detach(".dt")
//        将第一个b元素复制后插入到类nav-2014的前面
        $("b:first").clone().prependTo(".nav-2014")
    </script>

来源：https://www.cnblogs.com/kongzhagen/p/6198549.html

标签

jquery文档

jquery