【JS】使用JS创建多级DOM节点示例
一、看下原始HTML
原始DOM有两级，而第二级有多个DOM元素
<div class="__tlbeer_frame">
<div class="__tlbeer_text"> 可以采集 </div>
<button class="__tlbeer_button" onclick="main()">开始采集</button>
<span class="__tlbeer_close_btn" title="close">X</span>
</div>
二、先看一个使用JQuery创建的例子
使用JQery创建多级节点很方便，像写HTML一样组合而成。最后append加进来就创建成功了。
var divs = ' <div class="__tlbeer_frame ">'
+ '<div class="__tlbeer_text"> 可以采集 </div>'
+ '<button class="__tlbeer_button" onclick="main()">开始采集</button>'
+ '<span class="__tlbeer_close_btn" title="close">X</span>'
+ '</div>';
$("body").append(divs);
三、使用JS创建
JS的麻烦之处在于不能一次创建多级。所以一级一级的添加。
var div1 = document.createElement("div");
div1.className = "__tlbeer_frame";
var div2 = document.createElement("div");
div2.className = "__tlbeer_text"
div2.innerText = "可以采集"
var button = document.createElement("button");
button.className = "__tlbeer_button"
button.innerText = "开始采集"
button.onclick = function () {
main()
}
var span = document.createElement("span")
span.className = "__tlbeer_close_btn"
span.innerHTML = "X"
span.title = "close"
div1.appendChild(div2)
div1.appendChild(button)
div1.appendChild(span)
document.body.appendChild(div1)
完
