本文详细介绍如何使用 JavaScript 动态创建 div、li 和 img 等 HTML 元素，并通过 createElement、setAttribute 和 appendChild 方法设置属性与内容。相比拼接 HTML 字符串，动态创建方式代码更清晰、易维护，适合需要频繁更新页面的场景。
动态创建元素的优势与概述
将 HTML 标签序列直接赋值给 JavaScript 变量时，属性值需使用转义的双引号，且字符串往往冗长复杂。相比之下，使用 JavaScript 动态添加元素能避免繁琐的字符串拼接，使代码更具可读性并易于理解。
网页结构由层层嵌套的 HTML 标签构成，JavaScript 同样可以动态插入如 div、li、img 等标签。无论目标标签类型为何，动态创建的核心逻辑基本一致，以下将从动态添加 div 元素开始演示。
动态添加 div 元素的方法
一、JavaScript 动态添加 div 元素
<div id="parent"></div>
function addElementDiv(obj) {
var parent = document.getElementById(obj);
//添加 div
var div = document.createElement("div");
//设置 div 属性，如 id
div.setAttribute("id", "newDiv");
div.innerHTML = "js 动态添加div";
parent.appendChild(div);
}调用示例：addElementDiv("parent");
动态添加 li 元素的方法
二、JavaScript 动态添加 li 元素
<ul id="parentUl"><li>原li</li></ul>
function addElementLi(obj) {
var ul = document.getElementById(obj);
//添加 li
var li = document.createElement("li");
//设置 li 属性，如 id
li.setAttribute("id", "newli");
li.innerHTML = "js 动态添加li";
ul.appendChild(li);
}调用示例：addElementLi("parentUl");
动态添加 img 元素的方法
三、JavaScript 动态添加 img 元素
<ul id="parentUl"></ul>
function addElementImg(obj) {
var ul = document.getElementById(obj);
//添加 li
var li = document.createElement("li");
//添加 img
var img = document.createElement("img");
//设置 img 属性，如 id
img.setAttribute("id", "newImg");
//设置 img 图片地址
img.src = "/images/prod.jpg";
li.appendChild(img);
ul.appendChild(li);
}
调用示例：addElementImg("parentUl");
以上关于 JavaScript 动态添加元素（包括 div、li、img 等）及设置属性的方法已分享完毕，希望能为读者提供参考，并感谢大家的支持。