html节点设置代码,向html中添加节点(示例代码)

简单：

①，js中：

1 (function() {2

3 var box=document.querySelector("#box");4

5 var con1=document.createElement("div");6

7 box.appendChild(con1);8

9 })();

②，jQuery中：

1 $(function() {2

3 var con1="

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中写了，在

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

②，jQuery(进化)

1 $(function() {2

3 var li = $("

");4 var 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 += "

";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 += "

";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