jquery操作DOM文档_jqery dom帮助文档-优快云博客

本文链接：https://blog.youkuaiyun.com/no_name_sky/article/details/118438962

对DOM的创建，插入，移除，清空等操作。

插入操作

父子之间的插入
append() appendTo() 方法的展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<div class="box"></div>
<div class="box2">我是box2</div>
<script>
    $(function(){
        // 1.父子之间 父元素.append(子) 子元素.appendTo(父元素)

        // 子元素可以是一个字符串，也可以是js的DOM对象，也可以是jquery对象, 追加到子元素的最后一个元素
        $('.box').append('hello');  // 插入普通文本
        $('.box').append('<h2>hello</h2>');  // 插入标签+文本

        var oP = document.createElement('p');
        oP.innerText = '哈哈哈';
        $('.box').append(oP);  // 插入DOM对象

        $('.box').append($('.box2'));  // 如果插入的是一个jquery对象，相当于是一个移动操作，将box2移动到box下

        // appendTo 可以是一个选择器，js对象， jquery对象
        $('<p>我来了</p>').appendTo('.box');  // 建议使用，可以链式编程
    })
</script>
</body>
</html>

效果：
在这里插入图片描述
prepend()
prependTo()
使用方式和append,appendTo是一致的，只不过是插在子元素的第一个位置。
兄弟之间的插入：

兄弟元素.after(要插入的兄弟元素)
要插入的兄弟元素.insertAfter(兄弟元素)
在匹配元素之后插入

兄弟元素.before(要插入的兄弟元素)
要插入的兄弟元素.inserBefore(兄弟元素)
在匹配的元素之前插入

使用方式和apoend一致。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<ul>
    <li class="item">1</li>

</ul>
<script>
    $(function(){
        // es6 模板字符串 是用反引号 tab键上的那个
        $('.item').after(`<li>
            <a href="#">点击</a>
        </li>`);

        $('<li>2</li>').insertAfter('.item');

        $('.item').before('<li>3</li>');
        $('<li>4</li>').insertBefore('.item');
    })
</script>
</body>
</html>

效果
在这里插入图片描述

替换操作

$(selector).replaceWith(content) 将所有匹配到的元素替换成指定的string、js对象、jquery对象。
$('<p>哈哈</p>').replaceAll('h2') 将所有的h2标签替换

删除操作

$(selector).remove(); 删除节点之后，时间也会删除，即删除了整个标签
$(selector).detach(); 删除节点后，事件会保留
$(selector).empty(); 清空选中元素的所有后代节点