document.createElement()是在对象中创建一个对象。要与appendChild() 或 insertBefore()方法联合使用。
下面我们做一个小案例,添加医院。
1、点击创建出来一条
2、像这样
3、创建5条后,再次点击创建,就创建不了了,创建按钮隐藏。
4、点击删除,总条数小于5时,创建按钮就会出来。
<div class='box'>
<button id='btn'>创建医院</button>
<!-- <div>
<input type='text' /><button>删除</button>
</div> -->
</div>
var oBtn = document.getElementById('btn');
var divs = document.getElementsByTagName('div');
// 1、点击按钮 添加医院
oBtn.onclick = function() {
if(divs.length <= 5) {
// 创建节点
var oDiv = document.createElement('div');
var oInput = document.createElement('input');
var oButton = document.createElement('button');
oButton.innerHTML = '删除';
// 2、讲oInput 和 oButton 添加到oDiv
oDiv.appendChild(oInput);
oDiv.appendChild(oButton);
// 追加到页面上
document.body.appendChild(oDiv);
// 3、给oButton绑定点击事件
oButton.onclick = function() {
document.body.removeChild(oDiv);
btn.style.display = 'block';
}
}else {
this.style.display = 'none';
}
}