jQuery动态创建DOM需分“创建”和“插入”两步：用$()传HTML字符串或双参数法创建元素，再用appendTo等方法插入目标容器；动态元素事件须用事件委托绑定到已存在父容器。
要在网页运行时按需生成按钮、列表项或表单控件，而不是写死在HTML里，就必须用jQuery动态创建DOM元素——这要求你明确区分“创建”和“插入”两个动作，漏掉任一环节，元素就只存在于内存中，不会出现在页面上。
用$()函数创建基础元素
直接传入合法HTML字符串即可创建一个jQuery包装的DOM对象，比如$("
")或$("
内容
")。这种写法简洁，但仅适用于结构简单、不含复杂属性或事件绑定的场景。
创建单个空元素时，必须使用闭合标签，如$("<input>")或$("<span></span>")；写成$("<input>")在旧版IE中可能失败，因为浏览器无法自动补全自闭合逻辑。
这一步操作起来很简单，直接把字符串丢进$()就行。
带属性和事件的一体化创建
jQuery 1.4+ 支持双参数语法：$("
", { class: "alert", id: "msg", text: "操作成功" })。第二个参数是属性/方法/事件对象，可一次性设置class、id、data-*、text、html、click等。
方法一：设置原生属性与文本内容
用{ class: "btn primary", text: "提交" }创建带类名和文字的按钮，比先创建再链式调用.addClass().text()更紧凑。
方法二：绑定事件处理器
在props中直接写click: function(){ alert("已点击"); }，事件会绑定到该元素实例上——但注意：【该事件仅对当前创建的这个元素生效，不适用于后续动态追加的同类元素】。
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
方法三：设置data属性与CSS样式
支持data: { type: "save", step: 2 }和css: { color: "#333", fontSize: "14px" }，避免后续再调用.data()或.css()。
将新元素插入到页面指定位置
第一步：确认目标容器存在且可访问，例如$("#container")或$("body")。若容器尚未加载，操作会静默失败。
第二步：选择插入方式
① 追加到末尾：newEl.appendTo("#list") 或 $("#list").append(newEl)
② 插入到开头：newEl.prependTo("#list") 或 $("#list").prepend(newEl)
③ 插入为同级后方：newEl.insertAfter("#trigger")
④ 插入为同级前方：newEl.insertBefore("#trigger")
推荐统一使用newEl.appendTo(selector)风格——语义清晰，主语明确，不易混淆谁被插入、谁是容器。
如果目标容器是动态生成的（比如刚用$("
")创建完还没插入文档），不能直接用它作插入目标，否则会报错或无反应。
处理动态元素的事件委托
动态创建的按钮、列表项等，无法用$(".btn").on("click", handler)直接绑定事件，因为它们在执行这行代码时尚未存在于DOM中。
正确做法是把事件监听器绑定在**已存在的父容器**上，并指定子元素选择器：$("#list").on("click", ".delete-btn", function(){ $(this).closest("li").remove(); });
这利用了事件冒泡机制，只要点击发生在#list内部、且目标匹配.delete-btn，就会触发回调。即使该按钮是5秒后才通过.append()加进去的，也能响应。
务必确保父容器在页面初始化时就存在，否则委托无效。
