Dom中新增和删除标签

最新推荐文章于 2021-06-25 17:21:25 发布

一只顾小白

最新推荐文章于 2021-06-25 17:21:25 发布

阅读量620

点赞数 1

分类专栏： Java Script

本文链接：https://blog.csdn.net/weixin_46673313/article/details/108738267

版权

Java Script 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

创建一个新的标签

<body>
    <div class="app">ace</div>
</body>

现在页面上有一个div标签，我想要在这个div标签里用js再创建一个标签。
创建标签用createElement() ，同样也要用一个新的变量来接收它

<script>
let div = document.createElement('div')
div.innerHTML = 'simba' //添加内容
div.classList.add('demo') //添加class属性
document.body.appendChild(div) //将此div放到body的末尾
</script>

尤其不能把最后一句忘了，标签创建好了以后要用appendChild()加到页面中去。
经过上面的代码执行解释后，页面就变成了这样

<body>
    <div class="app">ace</div>
    <div class="demo">simba</div>
</body>

删除标签

删除一个标签，用标签.remove() 就可以将其删除

  <script>
 let ace = document.querySelector('.app')
 ace.remove()//删除此标签
  </script>

执行完上面的代码段以后，html页面就变成了

<body>
    <div class="demo">simba</div>
</body>

一只顾小白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Dom中新增和删除标签

创建一个新的标签<body> <div class="app">ace</div></body>现在页面上有一个div标签，我想要在这个div标签里用js再创建一个标签。创建标签用createElement() ，同样也要用一个新的变量来接收它<script>let div = document.createElement('div')div.innerHTML = 'simba' //添加内容div.classList.
复制链接

扫一扫