jQuery对DOM节点进行操作(插入节点之在元素内部插入)

1.定义和用法

  append(content):为所有匹配的元素的内部追加内容(在被选元素的结尾插入内容)

  示例:

<body>
    <script type="text/javascript">
        //入口函数
        $(document).ready(function(){
            // 创建文本节点
            var $jsp = $("<h1>hello world</h1>")
            //插入
            $("#box").append($jsp)
        })
    </script>
    <div id="box"></div>
</body>

  输出:

  appendTo(content):将所有匹配的元素添加到另一个元素集合中(在被选元素的结尾插入内容)

<body>
    <script type="text/javascript">
        //入口函数
        $(document).ready(function(){
            // 创建文本节点
            var $jsp = $("<h1>hello world</h1>")
            //插入
            $jsp.appendTo("#box")
        })
    </script>
    <div id="box"></div>
</body>

  输出:

  prepend(content):在被选元素的开头插入内容

  示例:

<body>
    <script type="text/javascript">
        //入口函数
        $(document).ready(function(){
            // 创建文本节点
            var $jsp = $("<h1>hello world</h1>")
            //插入
            $("#box").prepend($jsp)
        })
    </script>
    <div id="box">123</div>
</body>

  输出:

  prependTo(content):将所有匹配的元素插入到另一个元素集合中的开头

  示例:

<body>
    <script type="text/javascript">
        //入口函数
        $(document).ready(function(){
            // 创建文本节点
            var $jsp = $("<h1>hello world</h1>")
            //插入
            $jsp.prependTo($("#box"))
        })
    </script>
    <div id="box">123</div>
</body>

  输出:

原文地址:https://www.cnblogs.com/abner-pan/p/12856945.html