// 1. document.write 弊端只能在body区域添加标签
document.write('<div>我是盒子</div>')
document.write('')
// 2. innerHTML 覆盖掉原来的元素
var box = document.getElementById('box')
box.innerHTML = '<p>ppppppp</p>'
//3.
/*
创建元素document.createElement('标签名')
添加元素 父元素.appendChild(创建的元素)
*/
var h1 = document.createElement('h1')
box.appendChild(h1)
//删除元素 removeChild
box.removeChild(h1)
动态创建列表
<style>
#btn {
width: 300px;
height: 100px;
font-size: 30px;
}
#box {
margin-top: 30px;
width: 300px;
height: 300px;
border: 3px solid red;
}
.li1 {
font-size: 30px;
}
</style>
<body>
<button id="btn">创建列表</button>
<div id="box"></div>
</body>
<script>
var bth = document.getElementById('btn')
var box = document.getElementById('box')
console.log(bth, box);
var arr = ["降龙十八掌", "吸星大法", "葵花宝典", "辟邪剑谱", "乾坤大挪移", "独孤九剑", "六脉神剑"]
bth.onclick = function () {
var ul = document.createElement('ul')
box.appendChild(ul)
arr.forEach(function(zi,hao){
var li = document.createElement('li')
ul.appendChild(li)
li.innerText=zi;
li.setAttribute('class','li'+(hao+1))
li.onmouseover = function(){
this.style.backgroundColor = 'red'
}
li.onmouseout=function(){
this.style.backgroundColor=''
}
li.onclick=function(){
ul.removeChild(this)
}
})
this.disabled=true
this.innerText='创建成功'
}
</script>