向html中添加节点

转载自https://www.cnblogs.com/chenluomenggongzi/p/5903390.html

简单：

①，js中：

按 Ctrl+C 复制代码

1 (function () {
2 
3     var box=document.querySelector("#box");
4 
5     var con1=document.createElement("div");
6 
7     box.appendChild(con1);
8 
9 })();

按 Ctrl+C 复制代码

②，jQuery中：

1 $(function () {
2 
3     var con1="<div></div>";
4 
5     $("#box").append(con1);
6 
7 });

进化：

实现向ul中添加节点3个li,且每个li中还有四个div,即

①，js（进化）

 1 (function () {
 2 
 3     var box = document.querySelector("#box");
 4 
 5 
 6     for (var i = 0; i < 3; i++) {
 7         var li = document.createElement("li");
 8         box.appendChild(li);
 9         for (var j = 0; j < 4; j++) {
10             var div = document.createElement("div");
11             li.appendChild(div);
12         }
13     }
14 })();

js（超进化）

 1 (function () {
 2 
 3     var box = document.querySelector("#box");
 4     var liString = "<li><div></div><div></div><div></div><div></div></li>";
 5 
 6     for (var i = 0; i < 3; i++) {
 7         box.innerHTML += liString;
 8     }
 9 
10 })();

这样的好处：加快了页面加载的速度，毕竟少了个循环╮(╯▽╰)╭

注意点：这里是innerHTML+= 不是innerHTML=，原因：innerHTML的意思是“替换”不是“添加”，如果写成=，那么会只有一个li

js（超级进化）

 1 (function () {
 2 
 3     var box = document.querySelector("#box");
 4     var style = document.querySelector("#style");
 5     var liString = "", liStyle = "";
 6 
 7     for (var i = 0; i < 3; i++) {
 8         liString += "<li><div></div><div></div><div></div><div></div></li>";
 9         liStyle += "#box li:nth-child(" + i + ") {background:#abcedf}"
10     }
11     box.innerHTML = liString;
12     style.innerHTML += liStyle;
13 
14 })();

这里在Html中写了，在<style>标签里面添加了id=“style”

好处：结合nth-child选择器 实现了动态为每个li添加背景。

②，jQuery（进化）

 1 $(function () {
 2 
 3     var li = $("<li></li>");
 4     var div = $("<div></div>");
 5 
 6     for (var i = 0; i < 3; i++) {
 7         var oli = li.clone();
 8         oli.addClass("dd");
 9         $("#box").append(oli);
10         for (var j = 0; j < 4; j++) {
11             var odiv=div.clone();
12             oli.append(odiv);
13         }
14     }
15 });

jQuery(黑暗进化)

 1 $(function () {
 2 
 3     var liString = "";
 4     for (var i = 0; i < 3; i++) {
 5         liString += "<li><div></div><div></div><div></div><div></div></li>";
 6     }
 7 
 8     $("#box").innerHTML = liString;
 9 
10 });

以上代码通过模仿js而写，会发现没有任何效果，并且不报错。呵呵了

（正如数码宝贝，太一急切想让亚古兽进化，结果黑暗进化了。。。）

JQuery（超级进化）

 1 $(function () {
 2 
 3     var liString = "";
 4     for (var i = 0; i < 3; i++) {
 5         liString += "<li><div></div><div></div><div></div><div></div></li>";
 6     }
 7 
 8     $("#box")[0].innerHTML = liString;
 9 
10 });

如代码，终于正常进化了，学习亦如此，不要急于求成。

这里，说明一下，innerHTML的行使对象应该是标签，而不是节点，即应该是document.querySelector获取到的，而不是$（）获取到的

思维联想，html新增的标签audio,通过js控制其开始暂停，行使对象也是标签，不是对象，详情看一下网页。

http://zhidao.baidu.com/link?url=qiuaU30c7BrJDQnuC7E_vP2A2KhCkM1iKaCQA_tXwzNm4M97zOLZABRXvFDGtGV02LTa-EiEZ864OMbiSXeofg3xD3Jl3cVccO38SmP-iR7