JavaScript-元素增删改查

创建节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>

<script>
    let oSpan = document.createElement("span");
    console.log(oSpan);
    console.log(typeof oSpan);
</script>
</body>
</html>

添加节点

注意点：appendChild 方法会将指定的元素添加到最后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<div></div>

<script>
    let oSpan = document.createElement("span");
    let oDiv = document.querySelector("div");

    oDiv.appendChild(oSpan)

    let oA = document.createElement("a");
    oDiv.appendChild(oA);
</script>
</body>
</html>

插入节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<div>
    <h1>我是标题</h1>
    <p>我是段落</p>
</div>

<script>
    let oSpan = document.createElement("span");
    let oDiv = document.querySelector("div");
    let oH1 = document.querySelector("h1");
    let oP = document.querySelector("p");

    oDiv.insertBefore(oSpan, oH1);
    oDiv.insertBefore(oSpan, oP);
</script>
</body>
</html>

删除节点

注意点：在 js 中如果想要删除某一个元素, 只能通过对应的 父元素 来删除，元素是不能够自杀的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<div>
    <h1>我是标题</h1>
    <p>我是段落</p>
</div>

<script>
    let oSpan = document.createElement("span");
    let oDiv = document.querySelector("div");
    let oP = document.querySelector("p");

    oDiv.insertBefore(oSpan, oP);

    console.log(oSpan.parentNode);

    oSpan.parentNode.removeChild(oSpan);
    oDiv.parentNode.removeChild(oDiv);
</script>
</body>
</html>

克隆节点

注意点：cloneNode 方法默认不会克隆子元素, 如果想克隆子元素需要传递一个 true：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<div>
    <h1>我是标题</h1>
    <p>我是段落</p>
</div>

<script>
    let oDiv = document.querySelector("div");

    let newDiv1 = oDiv.cloneNode();
    console.log(newDiv1);

    let newDiv2 = oDiv.cloneNode(true);
    console.log(newDiv2);
</script>
</body>
</html>

image-20211109143129424

End

posted @ 2021-11-09 14:33  BNTang  阅读(159)  评论(0)    收藏  举报