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';
}
}