创建元素的方式-CSDN博客

本文链接：https://blog.csdn.net/m0_72815229/article/details/128140215

//  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>