1、创建一个元素
docunment.createElement( tag );创建一个元素节点
let div = document.createElement(“div”);创建一个div标签
document.createTextNode( Text );创建一个文本节点
let textNode =
document.
createTextNode('Here I am'
)
;
2、插入方法
对于文本和元素来说使用:
node.append(...nodes or strings)
—— 在node
末尾 插入节点或字符串,node.prepend(...nodes or strings)
—— 在node
开头 插入节点或字符串,node.before(...nodes or strings)
—— 在node
前面 插入节点或字符串,node.after(...nodes or strings)
—— 在node
后面 插入节点或字符串,
对于HTML代码来说:
"beforebegin"
—— 将html
插入到elem
之前,"afterbegin"
—— 将html
插入到elem
开头,"beforeend"
—— 将html
插入到elem
末尾,"afterend"
—— 将html
插入到elem
之后。
3、节点移除
node.remove()
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const lis = document.querySelectorAll("#list li");
// 移除节点
setTimeout(() => {
lis[1].remove() // 将lis的第二个元素移除
}, 2000);
</script>
4、克隆节点
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const list = document.getElementById("list");
// 克隆节点
console.log(list.cloneNode()) // 浅复制,复制表面
console.log(list.cloneNode(true)) // 深复制
</script>
5、DocumentFragment
创建一个容器,用来装节点,当我们将其插入某个位置时,则会插入装进去的节点
调用:const df = new DocumentFragment();
然后可以往 df 中放节点 :df.append(......)
再把df放到其他标签元素内:???.append(df)
这样,DocumentFragment 先把节点放到容器中,再添加到页面上,页面只要渲染一次,提升性能
<ul id="list">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<script>
const list = document.getElementById("list");
// DocumentFragment 先把节点放到容器中,再添加到页面上,页面只要渲染一次,提升性能
// 使用数组也可以达到同样的效果
const fragment = new DocumentFragment();
for (let i = 0; i <= 10; i++) {
const li = document.createElement("li");
li.innerText = i;
fragment.append(li)
}
list.append(fragment); // 一次渲染页面
// 数组
const fragment1 = [];
for (let i = 0; i <= 10; i++) {
const li = document.createElement("li");
li.innerText = i;
fragment1.push(li)
}
list.append(...fragment1); // 一次渲染页面
</script>