当前位置: 代码迷 >> 综合 >> 04JS第三天 ----- js核心第一天 --- 元素(标签)节点增删改操作 ---替换节点,删除节点
  详细解决方案

04JS第三天 ----- js核心第一天 --- 元素(标签)节点增删改操作 ---替换节点,删除节点

热度:91   发布时间:2023-10-11 01:03:58.0

5.3、替换节点

方法:父节点.replaceChild(新节点, 待替换的节点);

<ul><li>林黛玉</li><li>贾宝玉</li><li>薛宝钗</li><li>刘姥姥</li>
</ul><script>// 父节点.replaceChild(新节点, 待替换的节点);//找父节点var ul = document.getElementsByTagName('ul')[0];//新节点var newLi = document.createElement('li');var text = document.createTextNode('王熙凤');newLi.appendChild(text);//找到待替换的节点var jiabaoyu = document.getElementsByTagName('li')[1];//执行替换ul.replaceChild(newLi, jiabaoyu);
</script>

5.4删除节点

方法:父节点.removeChild(子节点);

HTML代码

<ul><li>林黛玉</li><li>贾宝玉</li><li>薛宝钗</li><li>刘姥姥</li>
</ul>

JS代码

/********************** 删除节点 *************************/
//父节点.removeChild(子节点);
var ul = document.querySelector('ul');
var xiaoLiu = document.getElementsByTagName('li')[3];
ul.removeChild(xiaoLiu);