小案例：可编辑框

1、HTML

 <div id="box">
        <ul>
            <li>
                <span>点击修改</span>
                <input type="text" value="点击修改">
                <p>修改</p>
            </li>
            <li>
                <span>点击修改</span>
                <input type="text">
                <p>修改</p>
            </li>
            <li>
                <span>点击修改</span>
                <input type="text">
                <p>修改</p>
            </li>
            <li>
                <span>点击修改</span>
                <input type="text">
                <p>修改</p>
            </li>
        </ul>
    </div>

2、css

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        #box ul li{
            height: 50px;
            /* background-color: gray; */
            line-height: 50px;
            font-size: 12px;
            padding-left: 50px;
            border-bottom: 1px solid red;
        }
        #box ul li span{
            float: left;
        }
        #box ul li input{
            float: left;
            margin-top: 14px;
            color: #999;
            display: none;
        }
        #box ul li p{
            float: left;
            width: 50px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            margin-top: 12px;
            background-color: #000;
            color: #fff;
            cursor: pointer;
            margin-left: 10px;
        }
    </style>

3、js

<script>
        var box=document.getElementById('box');
        var p=document.querySelectorAll('ul li p');
        var span=document.querySelectorAll('ul li span');
        var inp=document.querySelectorAll('ul li input');

        p.forEach((oP,index)=>{
            // console.log(oP,index);
            oP.onclick=function(){
                if(this.innerHTML==='修改'){
                    //span->none  input->block
                    //获取span内容：点击修改赋给inp[index].innerHTML
                    inp[index].value=span[index].innerHTML;
                    // console.log(span[index].innerHTML);
                    span[index].style.display='none';
                    inp[index].style.display='block';
                    this.innerHTML='确认';
                }else{
                    //span->block  input->none
                    span[index].innerHTML=inp[index].value;
                    span[index].style.display='block';
                    inp[index].style.display='none';
                    this.innerHTML='修改';
                }
            }
        })
    </script>