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的区别：

用法：

<div id="test">

<span style="color:red">test1</span> test2

</div>

在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的值也就是

1	`<div id="test"><span style="color:red">test1</span> test2</div>`

完整示例：

<div id="test">

<span style="color:red">test1</span> test2

</div>

<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>

<a href="javascript:alert(test.innerText)">inerHTML内容</a>

<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText.

html——原生js与jquery创建元素节点区别相关推荐

原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
原生js和jquery常用的DOM操作
前言将原生JS和jquery里面的DOM操作进行了一下整理,方便以后温习. 创建元素节点 1.原生: document.createElement("div") 2.jquery ...
jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...
原生js实现给指定元素的后面追加内容
参考链接:http://www.jb51.net/article/35412.htm 原生js实现给指定元素的后面追加内容 var header1 = document.getElementById( ...
原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡话不多说,先给各位看一下功能图: 好了,下边 ...
jQuery 学习-DOM篇（一）：jQuery 创建元素并添加属性
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
原生js与jquery的区别
原生js与jquery的区别 1.选择器: js: $('.car_img_con img')[0]; var jsObj = document.getElementsByClassName('sel ...
js添加和删除元素节点
js添加和删除元素节点 <!DOCTYPE html> <html> <head><meta charset="UTF-8">< ...
js与jquery获取子节点、父节点、兄弟节点的方法
js与jquery获取子节点.父节点.兄弟节点的方法在写代码时,时不时会遇到获取子节点.父节点等需要,但有的时候总是弄混淆不是很清晰,所以针对这些问题,总结了jquery与js获取节点的方法 js方 ...

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

html——原生js与jquery创建元素节点区别相关推荐

最新文章

热门文章