javaScript点击按钮innerHTML字符串拼接

*{
    
    
            padding: 0;
            margin: 0;
        }
        div{
    
    
            width: 50px;
            margin: 0 auto;
        }
        button{
    
    
            cursor: pointer;
        }
        ul{
    
    
            margin-top: 5px;
            list-style: none;
            border: 1px solid #000;
            cursor: pointer;
            display: none;
        }
        li{
    
    
            padding: 5px;
            text-align: center;
        }
        li:hover{
    
    
            background-color: red;
        }
        #box{
    
    
            border-top: 1px solid #000;
        }

<div>
        <button id="add">输入法</button>
        <ul>
            <li>简写</li>
            <li>拼音</li>
            <li id="box">关闭</li>
        </ul>
    </div>

首先获取li元素获取的是伪数组，将伪数组转换数组，然后循环数组标签用数组的lis[i]给没个标签点击事件使用this.innerHTML获取每个文本，再用一个变量来获取点解按钮的文本，获取lis每个文本加等于用变量来获取的点击按钮的文本赋值给点击按钮获取的元素。

 var lis=document.getElementsByTagName('li')
        var add=document.getElementById('add')
        var box=document.getElementById('box')
        var ul=document.getElementsByTagName('ul')[0]
        console.log(add.innerHTML);
        add.onclick=function(){
    
    
            ul.style.display='block'
           
        }
        console.log(Array.from(lis));
        lis=Array.from(lis)//伪数组转换数组
        var son=add.innerHTML//获取点击按钮的文本
        for(var i=0; i<lis.length; i++){
    
    
            lis[i].onclick=function(){
    
    
                console.log(this.innerHTML);
                ul.style.display='none'
                add.innerHTML=son+this.innerHTML
            }
            console.log( add.innerHTML+son);
        }
        // add.innerHTML+=son
        console.log(son);
        

        box.onclick=function(){
    
    
            ul.style.display='none'
        }