jQuery创建新元素是jQuery HTML元素操作的基础功能，通过简洁的语法即可快速生成HTML元素，配合后续插入、修改等操作，可高效完成DOM结构的动态构建，满足前端页面交互与内容更新的需求。
目录
jQuery创建新元素的核心方法
jQuery创建新元素的核心方法是通过$()函数传入HTML标签字符串，该方法会解析字符串并生成对应的DOM元素节点，生成的元素默认处于内存中，需通过插入方法添加到页面DOM树中才能显示。
基础创建方法（$(‘<标签>’)）
基础创建方法直接通过$()函数传入HTML标签字符串，即可创建对应的新元素，标签字符串可包含简单的标签名称，也可嵌套标签，是jQuery创建新元素最常用的方式。
语法
// 创建单个基础元素
$('<标签名>');
// 创建嵌套元素
$('<父标签><子标签></子标签></父标签>');示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery基础创建新元素示例</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
.box {
width: 150px;
height: 100px;
background: #f0f0f0;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// 创建单个div元素
var singleDiv = $('<div>');
// 为创建的元素添加类名（后续插入页面会生效）
singleDiv.addClass('box');
// 创建嵌套元素（div包含p标签）
var nestedElem = $('<div class="box"><p>嵌套创建的元素</p></div>');
// 将创建的元素插入到页面容器中
$('#container').append(singleDiv).append(nestedElem);
</script>
</body>
</html>jQuery创建新元素的进阶用法
除基础创建外，jQuery创建新元素时可直接为元素设置属性、样式和内容，无需单独调用属性或样式操作方法，简化代码编写流程，提升开发效率。
创建带属性的新元素
创建新元素时，可在HTML标签字符串中直接添加属性（如id、class、src、href等），也可通过jQuery链式调用attr()方法为新元素设置属性，两种方式均可实现属性赋值。
语法
// 方式1：标签字符串中直接添加属性
$('<标签名 属性名="属性值" 属性名2="属性值2"></标签名>');
// 方式2：链式调用attr()设置属性
$('<标签名>').attr('属性名', '属性值').attr('属性名2', '属性值2');示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery创建带属性的新元素示例</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
.link {
color: #0066cc;
text-decoration: none;
margin: 0 10px;
}
.img {
width: 200px;
height: auto;
border: 1px solid #eee;
}
</style>
</head>
<body>
<div id="content"></div>
<script>
// 方式1：直接在标签中添加属性
var link1 = $('<a href="#" class="link" title="首页">首页</a>');
// 方式2：链式调用attr()设置属性
var img = $('<img>').attr('src', 'images/test.jpg').attr('alt', '测试图片').addClass('img');
// 创建带多个属性的div
var card = $('<div id="card" class="box" data-id="123"></div>');
// 将元素插入页面
$('#content').append(link1).append(img).append(card);
</script>
</body>
</html>创建带内容的新元素
创建新元素时，可直接在标签字符串中嵌套文本内容或子元素，也可通过text()、html()方法为新元素设置内容，两种方式均可实现内容填充，适用于不同场景。
语法
// 方式1：标签字符串中嵌套内容
$('<标签名>文本内容</标签名>');
$('<标签名><子标签>子元素内容</子标签></标签名>');
// 方式2：链式调用text()/html()设置内容
$('<标签名>').text('文本内容');
$('<标签名>').html('<子标签>子元素内容</子标签>');示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery创建带内容的新元素示例</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
.title {
font-size: 18px;
color: #333;
margin: 10px 0;
}
.content {
font-size: 14px;
color: #666;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="article"></div>
<script>
// 方式1：标签中嵌套文本内容
var title = $('<h3 class="title">jQuery创建新元素教程</h3>');
// 方式1：标签中嵌套子元素和内容
var intro = $('<div class="content"><p>本文介绍jQuery创建新元素的多种方法。</p></div>');
// 方式2：链式调用text()设置文本内容
var author = $('<p>').text('教程作者：佚名');
// 方式2：链式调用html()设置带标签的内容
var note = $('<p>').html('注意：<strong>创建的元素需插入页面才会显示</strong>');
// 将所有元素插入页面
$('#article').append(title).append(intro).append(author).append(note);
</script>
</body>
</html>创建多个新元素
jQuery支持一次性创建多个新元素，可通过拼接HTML标签字符串，或多次调用创建方法后合并元素集合，实现批量创建，适用于需要快速生成多个同类元素的场景。
语法
// 方式1：拼接HTML标签字符串创建多个元素
$('<标签1></标签1><标签2></标签2><标签3></标签3>');
// 方式2：创建多个元素并合并集合
$('<标签1></标签1>').add('<标签2></标签2>').add('<标签3></标签3>');示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery创建多个新元素示例</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
.list-item {
list-style: none;
padding: 5px 10px;
border-bottom: 1px solid #eee;
}
.btn {
padding: 6px 12px;
margin: 5px;
border: none;
border-radius: 4px;
background: #0066cc;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="list"></ul>
<div id="btn-group"></div>
<script>
// 方式1：拼接标签字符串创建多个列表项
var listItems = $('<li class="list-item">列表项1</li><li class="list-item">列表项2</li><li class="list-item">列表项3</li>');
$('#list').append(listItems);
// 方式2：创建多个按钮并合并集合
var btn1 = $('<button class="btn">按钮1</button>');
var btn2 = $('<button class="btn">按钮2</button>');
var btn3 = $('<button class="btn">按钮3</button>');
var btns = btn1.add(btn2).add(btn3);
$('#btn-group').append(btns);
</script>
</body>
</html>jQuery创建新元素的方法对比
jQuery创建新元素的不同方式各有特点，适用场景不同，具体对比如下表所示，可根据开发需求选择合适的方式：
| 创建方式 | 特点 | 适用场景 |
|---|---|---|
| 基础创建（$(‘<标签>’)） | 语法简洁，操作简单，仅创建元素本身 | 快速创建单个简单元素，后续需单独设置属性和内容 |
| 带属性创建 | 创建时直接赋值属性，无需单独调用attr()，简化代码 | 创建需要指定属性（id、class、src等）的元素 |
| 带内容创建 | 创建时填充内容，无需单独调用text()/html()，效率更高 | 创建带有固定文本或子元素的元素 |
| 批量创建 | 一次性创建多个元素，减少代码冗余 | 需要快速生成多个同类元素（如列表项、按钮） |
jQuery创建新元素方法版本变化
jQuery创建新元素的核心方法在不同版本中整体功能稳定，主要变化集中在解析效率、兼容性及细节优化上，具体变化如下表所示：
| 版本 | 变化说明 |
|---|---|
| jQuery 1.0+ | 支持基础创建方法（$(‘<标签>’)），可创建简单元素，但不支持复杂嵌套标签的高效解析，对特殊字符的处理存在兼容问题。 |
| jQuery 1.2+ | 优化了HTML标签字符串的解析逻辑，支持复杂嵌套元素的创建，修复了特殊字符解析的bug，同时支持链式调用attr()、text()等方法为新元素设置属性和内容。 |
| jQuery 1.4+ | 提升了创建元素的解析效率，支持在创建元素时直接传入JSON对象设置属性（如$(‘<div>’, {id: ‘box’, class: ‘test’})），进一步简化代码编写。 |
| jQuery 3.0+ | 移除了对IE6/7/8的兼容处理，优化了内存占用，修复了部分场景下创建嵌套元素时的布局偏差问题，同时保持核心创建语法不变，确保向下兼容。 |
jQuery创建新元素是动态DOM操作的基础，掌握不同创建方式的用法及特点，能灵活应对各类前端开发场景，结合插入、修改等操作，可高效构建动态、交互性强的页面，而jQuery创建新元素的简洁语法也大幅降低了DOM操作的复杂度。