DOM实现增删改查

最新推荐文章于 2025-03-01 18:03:28 发布

代码坤

最新推荐文章于 2025-03-01 18:03:28 发布

阅读量203

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/qq_65168354/article/details/127639614

版权

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>