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

前端技术 2023/09/09 JavaScript

本文实例讲述了javascript与jquery动态创建html元素的方法。分享给大家供大家参考，具体如下：

1.javascript创建元素

创建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

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);

2.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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/23366

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案