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编程实践提供有益帮助。

作者最新文章