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

最新推荐文章于 2022-05-07 14:38:14 发布

gis_morningsun

最新推荐文章于 2022-05-07 14:38:14 发布

阅读量3k

点赞数 1

分类专栏： Web 文章标签： jquery javascript 创建元素区别 innerthml

本文链接：https://blog.csdn.net/xcymorningsun/article/details/53781026

版权

本文总结了原生JavaScript与jQuery创建HTML元素的区别。在JavaScript中，可以通过不同方式创建select和div等元素，或者使用innerHTML拼接字符串。而在jQuery中，可以使用`$()`快速创建元素。此外，还探讨了innerHTML、innerText和outerHTML的差异，innerHTML包含HTML标签，innerText忽略HTML标签，outerHTML则包含元素本身及内部内容。在实际应用中，innerHTML更为通用，innerText主要适用于IE浏览器。

摘要由CSDN通过智能技术生成

学习完静态样式之后开始学习动态创建添加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()