V2版本: 改进操作界面,统一表单样式,更多工具支持批量生成,欢迎使用 到达~


文库 阅读
作者: xiaoyu 05/03 19:34:32

【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)

首页 我的 定制
定制咨询
微信二维码
扫一扫上面的二维码,加我为朋友。
微信扫码周一至周六服务
接定制开发需求