js_DOM节点的增删改查与属性设置

2020-07-11 19:02:46 阅读：327 来源： 互联网

标签：document DOM 标签改查 ele v1 v3 var js

1、DOM节点的增删改
增加标签：appendChild
删除标签：removeChild
修改标签：replaceChild




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

<style>
    .v1,.v2,.v3{
        width: 300px;
        height: auto;
    }
    .v1{
        background-color: #2459a2;
    }
    .v2{
        background-color: red;
    }
    .v3{
        background-color: deepskyblue;
    }
</style>


</head>
<body>


<div class="v1">
    <button class="but1">增</button>
    div1
</div>
<div class="v2">
    <button class="but2">删</button>
    div2</div>
<div class="v3">
    <button class="but3">改</button>
    div3
    <p>hello v3</p>
    </div>


</body>
<script>


    var add_ele=document.getElementsByClassName("but1")[0];
    var v1_ele=document.getElementsByClassName("v1")[0];
    //<!--    插入新的标签appendChild与内容-->
    add_ele.onclick=function () {
        //创建P标签
        var p_ele=document.createElement("p");
        //写入内容
        p_ele.innerHTML="hello p";
        //在<div class="v1">下插入P标签
        v1_ele.appendChild(p_ele);

    };

    // 删除标签 removeChild
    var del_ele=document.getElementsByClassName("but2")[0];
    var sons=v1_ele.getElementsByTagName("p");
    del_ele.onclick=function () {
        if(sons.length!=0){
            v1_ele.removeChild(sons[0])
        }
    }

    // 修改标签 replaceChild
    var up_ele=document.getElementsByClassName("but3")[0];
    var v3_ele=document.getElementsByClassName("v3")[0];
    up_ele.onclick=function () {
        var p_ele=v3_ele.getElementsByTagName("p")[0];
        var img_ele=document.createElement("img");
        img_ele.src="2.jpg";
        //标签替换
        if(p_ele!=undefined){
            v3_ele.replaceChild(img_ele,p_ele)
        }
    }

</script>

</html>

标签：document,DOM,标签,改查,ele,v1,v3,var,js
来源： https://www.cnblogs.com/hhqdsj/p/13285035.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js_DOM节点的增删改查与属性设置