节点操作-增删改

最新推荐文章于 2021-10-23 23:39:28 发布

hidden bug

最新推荐文章于 2021-10-23 23:39:28 发布

阅读量225

点赞数 2

文章标签： html javascript html5

本文链接：https://blog.csdn.net/hover_bug/article/details/120642376

版权

document.createElement() 用来生成网页元素节点，参数为元素的标签名；

document.createTextNode() 用来生成文本节点，参数为所要生成的文本节点的内容；

node.appendChild() 接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点；

node.hasChildNodes() 返回一个布尔值，表示当前节点是否有子节点

node.removeChild() 接受一个子节点作为参数，用于从当前节点移除该子节点

node.cloneNode() 用于克隆一个选中的节点。它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。 注意: 不会克隆绑定到该元素上的事件；

node.innerHTML 返回该元素包含的 HTML 代码。该属性可读写，常用来设置某个节点的内容；（不属于W3C DOM规范）

node.innerText

返回该元素包含的内容。该属性可读写

<body>
    <div id="d">
        <span>111</span>
    </div>
</body>
<script>
    //创建元素节点
    var p = document.createElement('p');
    //创建文本节点
    var t = document.createTextNode('女娲');
    //添加节点
    p.appendChild(t);
    var d = document.querySelector('#d')
    d.appendChild(p);

    //判断是否有子节点
    if(d.hasChildNodes('span')){
        var s = document.querySelector('span');
        //删除子节点
        d.removeChild(s);
    }

    // 克隆一个节点
    var c = d.cloneNode(true);
    d.appendChild(c);

	//操作选中元素的HTML代码，有值则是设置，无值则是获取
    alert(d.innerHTML);
    
    console.log(document.getElementById('d').innerText);
    console.log(document.getElementById('d').innerHTML);
</script>

案例

1. 点击按钮创建img节点，添加到body中

<body>
    <input type="button" value="我要图" id="btn">
</body>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        // var img = document.createElement('img');
        // img.src = '/img/c2.jpg';
        // document.getElementsByTagName('body')[0].appendChild(img);
        
        // 直接
        document.getElementsByTagName('body')[0].innerHTML += "<img src='/img/c3.jpg'>";
    }
</script>

2. 动态创建文本框

<body>
    <input type="button" value="++" id="btn">
    <div id="bo"></div>
</body>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        // document.getElementById('bo').innerHTML += '<input type="text">';
        
        var inp = document.createElement('input');//创建一个input标签
        document.getElementById('bo').appendChild(inp);//把input标签添加到div标签的里面（当做子级）
    }
</script>

hidden bug

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
节点操作-增删改

document.createElement() 用来生成网页元素节点，参数为元素的标签名；document.createTextNode() 用来生成文本节点，参数为所要生成的文本节点的内容；node.appendChild() 接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点；node.hasChildNodes() 返回一个布尔值，表示当前节点是否有子节点node.removeChild() 接受一个子节点作为参数，用于从当前节点移除该子节点node.cloneNod
复制链接

扫一扫