有如下代碼，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
var lis=document.querySelectorAll(".ct>li")

lis.forEach(function(value){
  value.addEventListener("click",function(){
    console.log(this.innerText)
  })
})
</script>

補(bǔ)全代碼，要求：

當(dāng)點(diǎn)擊按鈕開頭添加時(shí)在<li>這里是</li>元素前添加一個(gè)新元素，內(nèi)容為用戶輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在最后一個(gè) li 元素后添加用戶輸入的非空字符串.
當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>任務(wù)班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
        var btnHeadAdd=document.querySelector("#btn-add-start");
    var btnEndAdd=document.querySelector("#btn-add-end");
    var btnContent=document.querySelector(".ipt-add-content");
    var firstLi=document.querySelector(".ct>li:first-child")
    var ct=document.querySelector(".ct")
    var lis=document.querySelectorAll(".ct>li");

    btnHeadAdd.addEventListener("click",function(){
        if (!btnContent.value=="") {
            headAddEvent()
        }     
    })

    btnEndAdd.addEventListener("click",function(){
        if (!btnContent.value=="") {
            footerAddEvent()
        }
    })

    ct.addEventListener("click",function(e){
        var target=e.target
        console.log(target.innerText)
    })

    function headAddEvent(){
      var Newli=document.createElement("li")
      var btnText=btnContent.value
      var NewliText=document.createTextNode(btnText)
      Newli.appendChild(NewliText)
      ct.insertBefore(Newli,ct.firstChild)
    }

    function footerAddEvent(){
      var Newli=document.createElement("li")
      var btnText=btnContent.value
      var NewliText=document.createTextNode(btnText)
      Newli.appendChild(NewliText)
      ct.appendChild(Newli)
    }
</script>

補(bǔ)全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。

function $(id){
        return document.querySelector(id)
  }
    function $$(cls){
        return document.querySelectorAll(cls)
  }
    
    console.log($$(".ct>li"))

    $$(".ct>li").forEach(function(value){
        value.addEventListener("mouseover",function(){
            var dataImg = this.getAttribute('data-img');
            $(".img-preview").innerHTML='![](' + dataImg + ')'
        })
    })

實(shí)現(xiàn)如下圖Tab切換的功能

Paste_Image.png

http://js.jirengu.com/gofunopucu/1/edit?html,css,js,output

實(shí)現(xiàn)下圖的模態(tài)框功能，點(diǎn)擊模態(tài)框不隱藏，點(diǎn)擊關(guān)閉以及模態(tài)框以外的區(qū)域模態(tài)框隱藏

Paste_Image.png

http://js.jirengu.com/gexedeyopa/11/edit?html,css,js,output