JavaScript与jQuery动态创建HTML元素详解
作者:像素猫时间:2026-10-30 11:08:24浏览:574
本文介绍了使用原生JavaScript和jQuery动态创建HTML元素的方法。通过具体示例展示了如何创建select下拉框、div容器以及包含文本框和列表项的复杂结构,帮助开发者掌握前端动态DOM构建技巧。
动态创建HTML元素概述
本文通过具体示例,详细讲解了利用JavaScript和jQuery动态生成HTML元素的技术,供读者参考学习。
JavaScript原生DOM创建
首先介绍使用原生JavaScript创建元素的方法。
创建Select下拉框
以创建select下拉列表为例,演示如何添加选项并设置属性。
var select = document.createElement("select");
elect.options[0] = new Option("加载项1", "value1");
select.options[1] = new Option("加载项2", "value2");
select.size = "2";
testDiv.appendChild(select);
创建Div容器
接着演示如何创建div元素,包括设置ID、尺寸及内容。
var openDiv = document.createElement("div");
openDiv.id = "div3D";
openDiv.style.width = w+"px";
openDiv.style.height = h+"px";
openDiv.innerHTML = strHtml;
document.body.appendChild(openDiv);
jQuery动态创建元素
随后介绍使用jQuery库创建元素的方式,展示链式调用的便捷性。
function CreateDom() {
var select = $("<select/>").appendTo($("body"));
var option1 = $("<option value=\"1\">text1</option>").appendTo(select);
var option2 = $("<option value=\"2\">text2</option>").appendTo(select);
var option3 = $("<option value=\"3\">text3</option>").appendTo(select);
var text = $("<input type=\"text\">").css({ "width": "150px", "border": "1px lightgrey solid" }).appendTo($("body"));
var checkbox = $("<input type=\"checkbox\" />").appendTo($("body"));
var ul = $("<ul/>").appendTo($("body"));
var li = $("<li>li1</li>").appendTo(ul);
var li = $("<li>li2</li>").appendTo(ul);
}
如需了解更多JavaScript相关技巧,可参考本站的《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》等专题文章。
希望上述内容能对您的JavaScript编程实践提供有益帮助。
作者最新文章
js-cookie 安装与基础用法:set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目:制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式:设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件?
2026-11-05 09:37:58
