原生js修改文本內容

關於修改文本的內容，有好多不同的寫法，今天實現一個簡單的的案例就是點擊“編輯”按鈕，文本內容可以保存。看下圖：

這個例子想要實現的效果就是點擊編輯，出現文本框，然后可以更改內容，關鍵就是在實際項目中可能會遇到有多行這樣的內容，那么現在就只能用到傳參來解決了，只要實現一個剩下的就都好說了，來看看代碼：

<ul id="list">
       <li>
           <strong></strong>
           <input type="text" value="">
           <i>編輯</i>
           <span>保存</span>
       </li>
       <li>
           <strong></strong>
           <input type="text" value="">
           <i>編輯</i>
           <span>保存</span>
       </li>
       <li>
           <strong></strong>
           <input type="text" value="">
           <i>編輯</i>
           <span>保存</span>
       </li>
       <li>
           <strong></strong>
           <input type="text" value="">
           <i>編輯</i>
           <span>保存</span>
       </li>
       <li>
           <strong></strong>
           <input type="text" value="">
           <i>編輯</i>
           <span>保存</span>
       </li>
   </ul>

布局很簡單，接下來看js實現：

<script>
    window.onload=function(){
        var oUl=document.getElementById("list");
        var aLi=oUl.getElementsByTagName("li");
        for(var i=0;i<aLi.length;i++){
            fn(aLi[i]);
        }
        //先完成其中一個li的效果
        function fn(aLi){//傳參來實現每個li的效果
            var oStxt=aLi.getElementsByTagName("strong")[0];
            var oInput=aLi.getElementsByTagName("input")[0];
            var oBj=aLi.getElementsByTagName("i")[0];
            var oBc=aLi.getElementsByTagName("span")[0];
            //初始化的情況下，所展示的內容
            oInput.style="display:none";
            oStxt.innerHTML="可以更改我的內容";

            oBj.onclick=function(){//點擊編輯按鈕
                oStxt.style="display:none";
                oInput.value=oStxt.innerHTML;//將input的值賦值到strong里
                oInput.style="display:block";
            };
            oBc.onclick=function(){//點擊保存按鈕
                oStxt.style="display:block";
                oInput.style="display:none";
                oStxt.innerHTML=oInput.value;
            }
        }
    }

</script>

這是效果圖，可以更改input里的內容（可以忽略樣式）

好了，今天就實現一個小的例子來聯系傳參，希望對大家有用！