DOM操作
不知道大家发没发现,很多时候啊,我们不方便直接在body里面写标签以及样式那些,之后我们又会从后台获取数据,然后再放到界面上,哎呀,没学过DOM的小伙伴就头疼了,这可怎么办啊,好难写啊。。。不怕,我下面就写几个简单的DOM增删改查的操作,我们大家一起来认识认识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="nav" id="nav"></div>
</body>
<script>
//定义一个nav通过获取id的方式来代表上面写的div
var nav = document.querySelector('#nav');
//增添一个p标签
var p = document.createElement('p');
p.className = 'p1';
p.id = 'p1';
p.style.color = 'red';
//给p里面写你想写的内容哦
p.innerHTML = '我是新建的哦';
//将p设置在id为nav的div标签下
nav.appendChild(p);
console.log(p);
//在nav下增添ul
var ul = document.createElement('ul');
nav.appendChild(ul);
//清楚li标签前面的小点点
ul.style.listStyle = 'none';
//在ul下增添li
var li = document.createElement('li');
li.innerHTML = '我是第一个';
ul.appendChild(li);
var li1 = document.createElement('li');
li1.innerHTML = '我是第二个';
ul.appendChild(li1);
var li2 = document.createElement('li');
li2.innerHTML = '我是第三个';
ul.appendChild(li2);
li1.innerHTML = '我是第四个';
li1.style.color = 'red';
nav.removeChild(p);
//添加 img
var img = document.createElement("img");
//设置 img 图片地址
img.src = "./kaishi.png";
nav.appendChild(img);
</script>
</html>