元素的增删改查
元素的增加
先获取元素,就是谁要增加子元素就获取谁
然后创建增加的元素:这个元素现在是不会渲染到页面上的,因为它不在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>