操作节点
<body>
<button onclick="addDiv()" id="btn1">创建一个div</button>
<button onclick="addDiv()" id="btn1">创建一个div</button>
<!-- <div>我是div</div> -->
<script>
function addDiv() {
/* document.createElement("元素名") 创建元素节点 */
let div1 = document.createElement('div');
// console.log(div1);
/* document.createTextNode("文本") 创建文本节点 */
let divText = document.createTextNode('我是div');
// console.log(divText);
/* A.appendChild( B) 把B节点追加至A节点的末尾 */
div1.appendChild(divText)
// console.log(div1);
let body = document.querySelector('body');
body.appendChild(div1)
/* 父节点.insertBefore( A,B ) 把A节点插入到B节点之前 */
let gege = document.createElement('button');
let btnText = document.createTextNode('btn的哥哥');
gege.appendChild(btnText)
let didi = document.getElementById('btn1');
body.insertBefore(gege,didi)
}
</script>
</body>
复制和删除节点
<body>
<div onclick="cloneNd()" class="div-class">我是div1</div>
<button onclick="rm()">删除第一个</button>
<script>
function rm(){
let body = document.getElementsByTagName('body')[0];
let div1 = document.getElementsByClassName('div-class')[0];
/* 父元素.removeChild(要被删除的元素) */
body.removeChild(div1)
}
function cloneNd(){
let body = document.getElementsByTagName('body')[0];
// let div1 = document.createElement('div')
// let text = document.createTextNode('我是div1')
// div1.appendChild(text);
// body.appendChild(div1);
/* cloneNode(deep) 复制某个指定的节点 */
let div1 = document.getElementsByClassName('div-class')[0];
console.log(div1);
/* 获取自己的元素 再插入到body中是可以的,
但是插入的时候发现 都一个元素节点
两种插入的实现方式 第一种创建新的节点去插入
第二种 clone出一个新的节点去插入*/
/* cloneNode如果里面不传true 表示传入自身节点（不包括子节点）
传true 表示 既克隆自身节点 也克隆了自身的子节点 */
let divClone = div1.cloneNode(true);
// console.log(divClone);
let text1 = document.createTextNode('=')
divClone.appendChild(text1)
body.insertBefore(divClone,div1)
// body.appendChild(divClone);
}
/* 写一个h1 标签 内容是我是h1 点击h1 可以克隆自己
可以把克隆出来的 文本内容 再加个 字符串 "=" 放在原来的h1的前面 */
</script>
</body>
