使用 JavaScript 或 jQuery 创建 HTML 元素的起始标签

在前端开发中，动态创建 HTML 元素是常见需求，无论是原生 JavaScript 还是 jQuery 都提供了便捷的方式来实现这一操作。本文将介绍两种方案的具体用法，并说明如何正确处理元素起始标签的创建逻辑。

一、原生 JavaScript 创建元素起始标签

原生 JavaScript 提供了标准的 DOM 操作方法，无需依赖第三方库即可完成元素创建。

1. 使用 createElement 方法

这是最基础的创建元素方式，document.createElement 方法会生成一个指定标签名的元素节点，后续的属性、内容添加都围绕该节点展开。

// 创建 div 元素的起始标签对应的节点
const divElement = document.createElement('div');
// 为元素添加属性
divElement.id = 'content';
divElement.className = 'container';
// 设置元素内容
divElement.textContent = '这是动态创建的 div 元素';
// 将元素插入到页面中
document.body.appendChild(divElement);

上述代码中，document.createElement('div') 本质上就是创建了 <div> 起始标签对应的 DOM 对象，后续通过属性赋值可以完善标签的属性配置，最终插入文档后就会渲染为完整的 <div id="content" class="container">这是动态创建的 div 元素</div> 结构。

2. 使用 insertAdjacentHTML 方法

如果需要直接插入包含起始标签的 HTML 字符串，可以使用 insertAdjacentHTML 方法，它支持在指定位置插入 HTML 片段，自动解析标签结构。

// 在 body 末尾插入包含起始标签的 HTML 片段
document.body.insertAdjacentHTML('beforeend', '<div id="new-div" class="highlight">直接插入的 div 元素</div>');

这种方式会直接解析传入的 HTML 字符串，自动生成对应的起始标签和闭合标签，适合需要快速插入较复杂 HTML 结构的场景。

二、jQuery 创建元素起始标签

jQuery 对 DOM 操作做了封装，创建元素的语法更加简洁，同时也支持直接传入属性配置。

1. 基础创建语法

jQuery 中可以直接传入标签字符串创建元素，也可以同时传入属性对象配置起始标签的属性。

// 创建基础的 div 元素
const $div = $('<div>');
// 创建带属性的 div 元素，直接配置起始标签的属性
const $divWithAttr = $('<div>', {
    id: 'jquery-div',
    class: 'jquery-container',
    text: 'jQuery 创建的 div 元素'
});
// 插入到页面中
$('body').append($divWithAttr);

第二种写法中，第二个参数对象的所有键值对都会被映射为 <div> 起始标签的属性，最终渲染的结构和原生 JavaScript 创建的效果一致。

2. 创建复杂结构元素

如果需要创建包含子元素的复杂结构，也可以直接在标签字符串中写完整的起始和闭合标签组合。

// 创建包含子元素的 ul 结构
const $ul = $('<ul class="list"><li>列表项1</li><li>列表项2</li></ul>');
$('body').append($ul);

三、两种方案的对比

两种方案各有适用场景，可以根据项目需求选择：

四、注意事项

• 创建元素后如果不插入到文档流中，元素不会在页面渲染，仅存在于内存中。

• 使用 insertAdjacentHTML 或 jQuery 传入 HTML 字符串时，要注意避免 XSS 攻击，不要直接插入不可信的用户输入内容。

• 原生 JavaScript 的 createElement 创建的是纯 DOM 节点，无法直接调用 jQuery 的方法，需要时可以用 $(domNode) 转换为 jQuery 对象。

• jQuery 创建的元素是 jQuery 对象，需要获取原生 DOM 节点时可以调用 [0] 或 get(0) 方法。

无论是使用原生 JavaScript 还是 jQuery，核心都是先生成对应标签的 DOM 结构，再通过属性配置完善起始标签的信息，最后插入文档完成渲染。开发者可以根据项目技术栈和具体需求选择合适的实现方式。

JavaScript jQuery 创建HTML元素 动态生成 DOM操作