jquery——3DOM--文档操作--dom的CRUD

 案例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery_05_dom</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /* 预告加载的代码 */
            /* 文档操作 */

            /*内部插入*/
            var append = "<span>辛苦遭逢起一经_最后</span>";
            /* append:内部追加内容 */
            $("#div").append(append);

            /* 追加元素 */
            // $("#div").append("span");
            /* 先将查询到div的内容,匹配到一个span标签中 */
            // $("#div").appendTo("span");

            var prepend = "<span>南朝宰相_前面</span>" 
            $("#div").prepend(prepend);

            /* 外部插入*/
            var before = "<span>宋高宗_赵构_外面前端</span>";
            $("#div").before(before);
            var after = "<span>宋高宗_赵构_外面后端</span>";
            $("#div").after(after);

 

            /* 将指定的内容用一个div包下来 
                把#div的内容用参数包起来
            */
            $("#div").wrap("<div class=\"wrap\"></div>");
            /* 把外面的内容去掉
                unwrap

                replaceWith(content|fn) :整体替换
             */

            /* empty:清除开始标签和结束标签中间的内容 */
            /*$("#div").empty();*/
            /* 将整个节点:元素删除 */
            $("#div").remove();
        });
    </script>
</head>
<body>
    <span></span>
    <div id="div">文天祥(过零丁洋)</div>
</body>
</h

jquery——3DOM--文档操作--dom的CRUD