html——原生js与jquery创建元素节点区别

学习完静态样式之后开始学习动态创建添加html元素，总结了下原生js与jquery生成元素区别。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);

当然也可以直接拼接好字符串，然后在直接使用innerhtml填充var str="<div>Hello</div>";p.innerHTML=str+"<br /><br />";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也有类似js中innerhtml的用法：

var html="<tr>"+"<td>"+data[i].F_DEPARTMENT+"</td>"
+"<td>"+data[i].F_NAME+"</td>"
+"<td>"+data[i].F_OBJECT+"</td>"
+"</tr>";
tbody.append(html);

至于他们的区别 ，引用了stackoverflow中的答案，写的比较不错

.html()

will
just call

.innerHTML

after
doing some checks for nodeType's & stuff. It also uses a

try/catch

block
where it trys to use

innerHTML

first
and if that fails, it'll fallback gracefully to jQuerys

.empty()

+

append()

附带介绍一下innerhtml，innertext，outerthml的区别：用法：?
在JS中可以使用：test.innerHTML:　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。　　上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。test.innerText:　　从起始位置到终止位置的内容, 但它去除Html标签　　上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。test.outerHTML:　　除了包含innerHTML的全部内容外, 还包含对象标签本身。　　上例中的text.outerHTML的值也就是?
完整示例：?
特别说明：　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText.