javascript和jquery动态创建html元素

来源：互联网发布：linux 解压到当前目录编辑：程序博客网时间：2024/05/17 12:51

转自：http://www.cnblogs.com/ajun/archive/2012/06/14/2549091.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);

}

0 0