JS如何向div中插入元素

最新推荐文章于 2024-09-21 12:31:13 发布

你的玄烨

最新推荐文章于 2024-09-21 12:31:13 发布

阅读量1w

点赞数 3

分类专栏： JavaScript HTML5 文章标签： js html javascript

本文链接：https://blog.csdn.net/CCQStudy/article/details/108140423

版权

JavaScript 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

HTML5

8 篇文章 0 订阅

订阅专栏

第一步： 首先我们写一个简单的页面，页面有一个div盒子，盒子里放置了一个li元素。
①页面效果
在这里插入图片描述

②页面代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #content {
        margin: 0 auto;
        width: 500px;
        height: 500px;
        background: skyblue;
      }
      li {
        width: 100%;
        height: 50px;
        background: rgba(102, 51, 153, 0.5);
        text-align: center;
        line-height: 50px;
      }
      #content li:nth-child(2) {
        background: rgba(255, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div id="content">
      <li>今晚打老虎！</li>
    </div>
    <script src="test.js"></script>
  </body>
</html>

第二步： 书写JS代码(代码有注释)

// 获取目标容器
let htmlObj = document.getElementById('content')
if (htmlObj) {
    // 创建li元素
    var li = document.createElement('li')
    // 向li中添加文本内容
    li.innerHTML = '李P是清官'
    // 向指定div中插入li
    htmlObj.appendChild(li);
} else {
    console.log('什么都没有获取到')
}