元素创建三种方式

元素的创建方式三种
1、document.write('标签名字及内容')
2、对象.innerHTML='标签的名字及内容'
3、document.createElement('标签的名字')

html部分

`<input type="button" value="添加一个p元素" id="btn">
<div id="dv"></div>`

方法一

`  function my$(id){
        return document.getElementById(id)
    }
    my$('btn').onclick=function(){
         document.write('<p>加油！冲啊！</p>')
     }`

图片.png

点击后.png

缺陷：会把原先元素去除，只保留新增

方法二

`my$('btn').onclick=function(){
        my$('dv').innerHTML='<p>添加方法二2222</p>'
        my$('dv').innerHTML='<img src="images/revolve1.jpg" alt="">'
        //后写入的会覆盖前面添加的内容
    } `

点击后.png

会保留原有的元素，但是多次添加，只会保留后面添加的内容（如：只保留了后添加的图片，未保留前添加的文字）

方法二添加示例

  `<input type="button"  value="add"id="btn">
<div id="dv"></div>
<script>
    function my$(id){
        return document.getElementById(id)
    }

    //创建数据
    var heroName=['妲己','安其拉','王昭君','貂蝉','甄姬']
    my$('btn').onclick=function(){
        //字符串拼接
        var str='<ul>'//拼接开始
        for(var i=0;i<heroName.length;i++){
            str+='<li>'+heroName[i]+'</li>'
        }
        str+='</ul>'//拼接结束
        //把str拼接完成的字符串放入div内
        my$('dv').innerHTML=str

        //等待所li创建完了之后 
        //获取所有li，给li添加鼠标移入移出事件
        var lis=my$('dv').getElementsByTagName('li')  
        for(var i=0;i<lis.length;i++){
            lis[i].onmouseover=function(){
                this.style.background='pink'
            }
            lis[i].onmouseout=function(){
                this.style.background=''
            }
        }
    }
</script>

图片.png

点击后，添加数据，且数遍移入li背景变色

点击后，鼠标移入.png

方法三

`<input type="button" value="添加元素" id="btn">
<div id="dn"></div>
<script>
    function my$(id){
        return document.getElementById(id)
    }
    my$('btn').onclick=function(){
        //创建元素
        var p=document.createElement('p')
        //给p元素写入内容
        p.innerHTML='hahahha'
        //把p元素放到div内  appendChild
        my$('dn').appendChild(p)
    }`

图片.png

点击两次后.png

点击几次就添加几次，不会消除原有的元素