这也是BIGO面试的其中之一,动态生成DOM节点并插入指定位置
原生方法1:
创建元素节点:Document.createElement(“div”)
创建属性节点:Document.createAttribute(“div”)
创建文本节点:Document.createTextNode(“div”)
插入节点的方法
插入父节点作为子节点
父节点.appendChild(“新节点”)
在指定的位置插入
父节点.insertBefore(新节点,在谁之前)
删除节点
父节点.removeChild(node)
替换子节点
父节点.replaceChild(node)
还有createComment(),insetData,replaceData等等的DOM操作。一下是代码
附加一个经常会出现在笔试或者面试题中的,childnode和children的区别
这两个都会返回该元素子节点的集合,那么总结出来的就是children只计算子节点,不包含文本节点和属性节点,而childnodes是包含文本节点和属性节点的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
background-color: red;
}
</style>
</head>
<body>
<!-- 创建元素节点和文本节点-->
<p id="createElem">点击创建带有文本和属性的节点</p>
<button onclick="myFunction()">click me</button>
<script>
function myFunction(){
var btn=document.createElement("button");
var text=document.createTextNode("CLICK ME");
var style=document.createAttribute("class");
style.value="red";
btn.appendChild(text);
btn.setAttributeNode(style);
document.body.appendChild(btn);
}
</script>
</body>
</html>