萧李
萧李

向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="
";
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 = "
    • ";
 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 += "
    • ";
 9         liStyle += "#box li:nth-child(" + i + ") {background:#abcedf}"
10     }
11     box.innerHTML = liString;
12     style.innerHTML += liStyle;
13 
14 })();

    复制代码

    这里在Html中写了，在