元素的增删克隆以及利用增删来显示数据到页面上

元素的增删改查

元素的增加

先获取元素，就是谁要增加子元素就获取谁
然后创建增加的元素：这个元素现在是不会渲染到页面上的，因为它不在DOM中
最后将新增加的元素添加到文档树中，x.appendChild(y) 即把y节点对象添加到x节点中

元素的删除

x.remove();
想要删除那一个元素就用那一个元素的id名调remove函数

var box = document.querySelector("#box")
var box2 = document.createElement("div") // 传入的字符串 是标签的的名字
box.appendChild(box2)

清空全部元素可以用innerHTML

var box=document.querySelector("#box");
box.parentElement.innerHTML="";

元素的克隆

想要克隆那一个元素就用那一个元素的id名调cloneNode函数
如果想要克隆这个元素的后代，就在函数中写true，不用true就只是单纯的克隆了这个元素

// 连同box的后代元素和所以的事件一同克隆就写true
// 不写true就不会克隆后代元素
var box2 = box.cloneNode(true); 

<style>
.box2 {
    
	width: 200px;
	height: 200px;
	background-color: aquamarine;
}
.box2 div{
    
	width: 600px;
	height: 150px;
	background-color: orchid;
}
</style>
<div id="box">
666
</div>
<button id="btn">btn</button>
<script>
var box = document.querySelector("#box")
var box2 = document.createElement("div") 
box.appendChild(box2)
// innerHTML是从对象的起始位置到终止位置的全部内容,包括Html标签，会被解析
// 而innerText是从起始位置到终止位置的内容,但它去除Html标签，不会被解析，只会被当成一个字符串
box2.innerHTML="box2";
// 给box2添加一个类名
box2.className="box2";
// 可以直接写两个类名，中间空格隔开，也可以分开写
box2.className="box2 box3";
box2.className=box2.className + " box2";

// 多个类名用add最好
// 相同类名只会添加一个
box2.classList.add("box2");
box2.classList.add("box3");
box2.classList.add("box3");

// 删除
box2.classList.remove("box3");

// 先加了一个box3然后还想加文本，结果box3就不见了
// 原因是：innerHTML会把尖括号里面的东西全部清空变成666了
// 666会把box2的所有元素全部覆盖
box2.appendChild(box3);
box2.innerHTML="666";
// 可以这样写，将666添加在一个div中，然后在把div添加到box2中，就是创建一个元素，把666作为它的innerHTML 然后把他添加到box2中
// 或者
// box2.innerHTML = box2.innerHTML+"666"; // 可以写成下面的样子
box2.innerHTML += "666"

// 克隆
btn.onclick=function(){
    
	// 清空自己的所以元素
	var box=document.querySelector("#box");
	box.parentElement.innerHTML="";
	
	// 克隆
	var box=document.querySelector("#box");
	// 连同box的后代元素和所以的事件一同克隆
	// 不写true就不会克隆事件
	var box2 = box.cloneNode(true); 
	box.appendChild(box2);
	
	// btn只是一个引用，没有创建，所以这是移了一个位
	box.appendChild(btn);
	
	// 因此想要两个地方都有就用克隆就不会移位了
	var btn1 = btn.cloneNode(); 
	box.appendChild(btn1);
}

模拟新浪微博把数据输出在页面上

<style type="text/css">
#mainbox {
    
	width: 970px;
	margin: 10px auto;
}
</style>
<div id="mainbox">

</div>
<script>
	var mysina={
    
		a:20,
		b:"20条新浪微博"，,
		arr:[
			{
    
				id:12345,
				text:"微博内容1",
				comments_count:20,
				att_count:80,
				report:13,
				imgs:["2.jpg", "3.jpg", "4.jpg"]
			},{
    
				id:12346,
				text:"微博内容2",
				comments_count:26,
				att_count:44,
				report:12,
				imgs:["2.jpg", "3.jpg", "4.jpg","4.jpg"]
			},{
    
				id:12347,
				text:"微博内容3",
				comments_count:63,
				att_count:34,
				report:76,
				imgs:["2.jpg", "3.jpg", "4.jpg"]
			},
		]
	}
	// 变量全部数据，全部输出在页面
	for(var i=0;i<mysina.arr.length;i++){
    
		// 创建一个div块
		var box1=document.createElement("div")
		// 添加到box1中
		mainbox.appendChild(box1)
		// 给box1添加一个类名
		box1.className="box1"
		// 创建一个div块
		var title=document.createElement("div")
		// 将div块添加到title中
		box1.appendChild(title)
		// 在title的块中显示新浪微博传过来的数据
		title.innerHTML=mysina.arr[i].text
		// 给box1添加一个类名
		title.classList.add("title")
		// 创建一个div块
		var imgbox=document.createElement("div")
		// 给imgbox添加一个类名
		imgbox.className="imgbox"
		// 将div块添加到box1中
		box1.appendChild(imgbox)
		// 遍历照片，显示到页面中
		mysina.arr[i].imgs.forEach((el)=>{
    
			var img1=document.createElement("img")
			img1.classList.add("img1")
			img1.src=el
			imgbox.appendChild(img1)
		})
	}
</script>