JS_node(节点增删该查)

最新推荐文章于 2023-01-13 10:15:39 发布

be great

最新推荐文章于 2023-01-13 10:15:39 发布

阅读量300

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_37431752/article/details/88194929

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 160px;
            height: 80px;
            background-color: deepskyblue;
        }
        .div2{
            width: 160px;
            height: 80px;
            background-color: red;
        }
        .div3{
            width: 160px;
            height: 80px;
            background-color: blue;
        }
        .div4{
            width: 160px;
            height: 80px;
            background-color: crimson;
        }
    </style>
</head>
<body>
<div class="div1">hellow,div1
    <input type="button"  value="add" onclick="add()">
</div>
<div class="div2">hellow,div2
   <input type="button"  value="del" onclick="del()">
</div>
<div class="div3">hellow,div3
<input type="button"  value="change" onclick="change()">
</div>
<div class="div4">hellow,div4</div>
<script>
    function add() {
        var ele=document.createElement("p")//创建p标签.
        ele.innerHTML="hello,add";//创建里面的内容，下面才是加入进去
        ele.style.backgroundColor="red";//改变属性。
        var div_content=document.getElementsByClassName("div1")[0];//找到div标签，然后把刚才创建的标签和文件内容加入进去.
        div_content.appendChild(ele)
    }
    function del() {
          var div_content=document.getElementsByClassName("div1")[0];//找到div标签，然后把刚才创建的标签和文件内容加入进去
          var son =document.getElementsByTagName("p")[0];
          div_content.removeChild(son);//删除的是在父节点里面调用的removeChild().
    }
    function change() {
         var ele=document.createElement("p")//创建p标签.
         ele.innerHTML="change_content";//创建里面的内容，下面才是加入进去
        var change_before =document.getElementsByTagName("p")[0];
        var div_content=document.getElementsByClassName("div1")[0];//找到div标签，然后把刚才创建的标签和文件交换。
        div_content.replaceChild(ele,change_before);
    }
</script>
</body>
</html>