JS如何向div中插入元素

￡神魔★判官ぃ 2022-11-29 12:49 276阅读 0赞

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

②页面代码

<!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('什么都没有获取到')
    }

页面效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]: /images/20221124/0a3c724d6dff4d558cae5f78a917a772.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 1]: /images/20221124/2612789fb94242c7be7d18f90fdc0847.png