转载自(https://www.cnblogs.com/chenluomenggongzi/p/5903390.html)
简单：
①，js中：
(function () {
var box=document.querySelector("#box");
var con1=document.createElement("div");
box.appendChild(con1);
})();
②，jQuery中：
$(function () {
var con1="<div></div>";
$("#box").append(con1);
});
进化：
实现向ul中添加节点3个li,且每个li中还有四个div,即
①，js（进化）
(function () {
var box = document.querySelector("#box");
for (var i = 0; i < 3; i++) {
var li = document.createElement("li");
box.appendChild(li);
for (var j = 0; j < 4; j++) {
var div = document.createElement("div");
li.appendChild(div);
}
}
})();
js（超进化）
(function () {
var box = document.querySelector("#box");
var liString = "<li><div></div><div></div><div></div><div></div></li>";
for (var i = 0; i < 3; i++) {
box.innerHTML += liString;
}
})();
这样的好处：加快了页面加载的速度，毕竟少了个循环╮(╯▽╰)╭
注意点：这里是innerHTML+= 不是innerHTML=，原因：innerHTML的意思是“替换”不是“添加”，如果写成=，那么会只有一个li
js（超级进化）
(function () {
var box = document.querySelector("#box");
var style = document.querySelector("#style");
var liString = "", liStyle = "";
for (var i = 0; i < 3; i++) {
liString += "<li><div></div><div></div><div></div><div></div></li>";
liStyle += "#box li:nth-child(" + i + ") {background:#abcedf}"
}
box.innerHTML = liString;
style.innerHTML += liStyle;
})();
这里在Html中写了，在
好处：结合nth-child选择器 实现了动态为每个li添加背景。
②，jQuery（进化）
$(function () {
var li = $("<li></li>");
var div = $("<div></div>");
for (var i = 0; i < 3; i++) {
var oli = li.clone();
oli.addClass("dd");
$("#box").append(oli);
for (var j = 0; j < 4; j++) {
var odiv=div.clone();
oli.append(odiv);
}
}
});
jQuery(黑暗进化)
$(function () {
var liString = "";
for (var i = 0; i < 3; i++) {
liString += "<li><div></div><div></div><div></div><div></div></li>";
}
$("#box").innerHTML = liString;
});
以上代码通过模仿js而写，会发现没有任何效果，并且不报错。呵呵了
（正如数码宝贝，太一急切想让亚古兽进化，结果黑暗进化了。。。）
JQuery（超级进化）
$(function () {
var liString = "";
for (var i = 0; i < 3; i++) {
liString += "<li><div></div><div></div><div></div><div></div></li>";
}
$("#box")[0].innerHTML = liString;
});
如代码，终于正常进化了，学习亦如此，不要急于求成。
这里，说明一下，innerHTML的行使对象应该是标签，而不是节点，即应该是document.querySelector获取到的，而不是$（）获取到的
思维联想，html新增的标签audio,通过js控制其开始暂停，行使对象也是标签，不是对象，详情看一下网页。