父节点对象调用
1.appendChild()追加节点
//1.获取到父节点
//2.找到孩子
//3.添加
var parent=document.getElementsByClassName('parent')[0];
var newChild=document.createElement('div');
//添加内部文本
// newChild.innerText='four';
/添加内部内容 innerHTML可以设别HTML代码片段 可以识别标签
newChild.innerHTML=`<div class='child'>newChild</div>`
parent.appendChild(newChild);
console.log(parent)
2.insertBefore()在参照节点前插入节点 第一个参数要插入的节点 第二个参数参照节点
同一个节点在页面中只存在一个
var two=parent.children[1];
parent.appendChild(two)
parent.insertBefore(newChild,two);
3.replaceChild()替换节点 第一个参数:要插入的节点;第二个参数:要替换的节点;第二个节点被删除
parent.replaceChild(newChild,two)
4.removeChild()一个参数 要移除的节点
parent.removeChild(two)
任意元素调用
parent.innerHTML;设别HTML代码片段
parent.innerText;;只识别文本 去除空格和回车
parent.textContent;只识别文本,不去除空格和回车
6.清空节点内部内容
parent.innerHTML=""
7.cloneNode();复制节点 有参数true代表深复制
//浅复制 只复制节点 不复制内容
var cloneTwo=two.cloneNode();
parent.appendChild(cloneTwo);
// 深复制 复制节点和内容
var cloneTwo=two.cloneNode(true);
parent.appendChild(cloneTwo);
原文地址:https://www.jb51.cc/wenti/3281096.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。