JS动态添加HTML元素

项目中遇到，记录一下。

JS动态添加HTML元素

HTML

<div class="form-group">
    <div class="form-inline" id="test-div">
    
    </div>
</div>

新建，可以是任何HTML元素，用button举例

function createButton() {
	var b = document.createElement("button");//创建按钮
	b.id = "test-button";
	b.type = "button";//指定类型
	b.className = "btn btn-info";//指定class属性
	b.innerHTML  = "确定";//指定显示文字
	b.onclick = function (){//点击事件
		//....do something
	};
	return b;
};

添加

var d = document.getElementById("test-div");//获取DIV
d.appendChild(createButton());

删除

var b = document.getElementById("test-button");//获取button
document.getElementById("test-div").removeChild(b);