js dom 操作节点

最新推荐文章于 2024-06-05 23:20:10 发布

我卢本伟没有开挂

最新推荐文章于 2024-06-05 23:20:10 发布

阅读量228

点赞数 1

文章标签： js dom 节点

本文链接：https://blog.csdn.net/weixin_43885123/article/details/84676280

版权

js dom 操作节点

html里的节点分为：
1.元素节点
2.属性节点
3.文本节点
4.注释节点

首先我们先创建一个div个一个按钮，用来做下面的操作：

创建并添加节点：
createElement() ----------------创建一个元素节点
appendChild()-------------------将新节点追加到子节点列表的末尾
当我们点击按钮的时候，会添加一个p标签到div中
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 100px;
            border: 1px solid gold;
            float: left;
        }
    </style>
</head>
<body>
       <div id="div1"></div>
       <input type="button" value="按钮" id="show"/>


       <script>
           var father=document.getElementById('div1');
           document.getElementById('show').onclick=function(){
               var newchild=document.createElement('p');
               newchild.innerText='这是一个通过js添加的p节点';
               father.appendChild(newchild)
           }
       </script>
</body>
</html>

移除节点
removeChild()--------移除一个子节点
当我们点击按钮的时候，会移除div里面的p标签
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 100px;
            border: 1px solid gold;
            float: left;
        }
    </style>
</head>
<body>
       <div id="div1">
           <p id="p">这是一个预先写好的p标签</p>
       </div>
       <input type="button" value="按钮" id="show"/>


       <script>
           var father=document.getElementById('div1');
           document.getElementById('show').onclick=function(){
               var p=document.getElementById('p');
               father.removeChild(p)
           }
       </script>
</body>
</html>

替换节点
replaceChild()--------替换一个子节点
当点击按钮的时候，创建一个新的节点(例如一张图片)，把原本div里面的p标签替换成新创建的节点
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 100px;
            border: 1px solid gold;
            float: left;
        }
    </style>
</head>
<body>
       <div id="div1">
           <p id="p">这是一个预先写好的p标签</p>
       </div>
       <input type="button" value="按钮" id="show"/>


       <script>
           var father=document.getElementById('div1');
           document.getElementById('show').onclick=function(){
               var p=document.getElementById('p');
               var img=document.createElement('img');
               img.src="a1.jpg";
               father.replaceChild(img,p)
           }
       </script>
</body>
</html>

在已有的子节点前添加一个新的子节点
insertBefore(新节点,已有节点)
当点击按钮的时候，创建一个新的节点(例如一张图片)，在原本div里面的p标签前添加上这个新节点。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 100px;
            border: 1px solid gold;
            float: left;
        }
    </style>
</head>
<body>
       <div id="div1">
           <p id="p">这是一个预先写好的p标签</p>
       </div>
       <input type="button" value="按钮" id="show"/>


       <script>
           var father=document.getElementById('div1');
           document.getElementById('show').onclick=function(){
               var p=document.getElementById('p');
               var img=document.createElement('img');
               img.src="a1.jpg";
               father.insertBefore(img,p)
           }
       </script>
</body>
</html>

复制节点
元素节点.cloneNode(Boolean)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 100px;
            border: 1px solid gold;
            float: left;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">
        <p>这是div2里的p标签</p>
    </div>
</div>
       <input type="button" value="按钮" id="show"/>


       <script>
           document.getElementById('show').onclick=function(){
                  var father=document.getElementById('div1');
                  var div2=document.getElementById('div2');
                  var new2=div2.cloneNode(false);//true是复制所有东西 包括div2里面的东西   false只复制这个div 里面的内容不复制
                  father.appendChild(new2)
           }
       </script>
</body>
</html>

我卢本伟没有开挂

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js dom 操作节点

js dom 操作节点html里的节点分为：1.元素节点2.属性节点3.文本节点4.注释节点首先我们先创建一个div个一个按钮，用来做下面的操作：创建并添加节点：createElement() ----------------创建一个元素节点appendChild()-------------------将新节点追加到子节点列表的末尾当我们点击按钮的时候，会添加一个p标签到di...
复制链接

扫一扫