纯 JS 动态插入 li 标签：告别 jQuery 的轻量级方案

在网页开发中，动态修改列表内容是很常见的需求。比如实时添加待办事项、展示动态加载的数据等。如果不想依赖 jQuery 这类第三方库，通过原生 JavaScript 也能轻松实现。下面通过基础代码和扩展案例，演示如何用纯 JS 操作 DOM 动态插入列表项。

基础实现代码

var li = document.createElement("li");
li.appendChild(document.createTextNode("li里的文字"));              
document.getElementById('ul_id').appendChild(li);

代码拆解

createElement
创建 <li> 元素，类似准备一个空容器。
createTextNode + appendChild
先创建文本节点再插入到 li，比直接写 innerHTML 更安全（避免 XSS 攻击风险）。
getElementById 定位父元素
通过 ul 的 id 找到目标列表，用 appendChild 将 li 添加为最后一个子元素。

实际应用场景

<!-- 示例：点击按钮动态添加列表项 -->
<ul id="todoList">
  <li>第一项任务</li>
</ul>
<button onclick="addItem()">添加新任务</button>

<script>
function addItem() {
  var li = document.createElement("li");
  li.textContent = "新增任务" + Date.now(); // 更简洁的文本写入方式
  document.getElementById('todoList').appendChild(li);
}
</script>

发表回复取消回复