javascript与jquery动态创建html元素示例

本文旨在介绍如何使用JavaScript和jQuery动态创建HTML元素，结合实例展示相关技巧，为开发者提供有价值的参考。

一、JavaScript创建元素

使用JavaScript创建元素十分灵活，可以通过document.createElement()方法创建新的HTML元素。例如，创建一个select元素并添加option子元素：

```javascript

var select = document.createElement("select");

select.options[0] = new Option("加载项1", "value1");

select.options[1] = new Option("加载项2", "value2");

select.size = "2";

testDiv.appendChild(select);

```

同样，我们也可以创建一个div元素，为其设置宽度、高度和内部HTML：

```javascript

var openDiv = document.createElement("div");

openDiv.id = "div3D";

openDiv.style.width = w+"px";

openDiv.style.height = h+"px";

openDivnerHTML = strHtml;

document.body.appendChild(openDiv);

```

二、jQuery创建元素

相较于JavaScript，jQuery提供了更为简洁的DOM操作方法。以下是一个创建多个HTML元素的示例：

```javascript

function CreateDom() {

var select = $("").appendTo$("body");

$("

text1").appendTo(select);

$("

text2").appendTo(select);

$("

text3").appendTo(select);

$("

").css({ "width": "150px", "border": "1px lightgrey solid" }).appendTo$("body");

$("").appendTo$("body");

$("

").appendTo$("body");

$("

• li1
").appendTo(ul);

$("

• li2
").appendTo(ul);

}

```

在这个例子中，我们使用了jQuery的$()函数来创建新的HTML元素，并通过链式方法设置元素的属性和样式，最后通过appendTo()方法将新元素添加到页面中。

更多对JavaScript感兴趣的读者，可以进一步了解《JavaScript进阶教程》、《JavaScript实战宝典》等相关专题，以深化对JavaScript的理解和应用。希望本文能对大家在JavaScript程序设计方面有所帮助。

无论是使用JavaScript还是jQuery，动态创建HTML元素都是前端开发中的一项重要技能。熟练掌握这一技能，将有助于开发更为动态、交互性强的网页应用。