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

     }

jquery创建节点案例

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
function appendText()
{
var txt1="<p>Text.</p>";              // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text.";               // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button onclick="appendText()">追加文本</button>

</body>
</html>

 

posted @ 2015-07-29 16:33  Shimily  阅读(158)  评论(0)    收藏  举报