js動態增加html頁面元素


問題:

 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
    <script type="text/javascript">
        function AddOrDelModel(modelId){
               if(document.getElementById(modelId).checked){
                     var insertText = "<table><tr><td>"+modelId+"被選中</td></tr></table>"; 

             document.getElementById("insert").innerHTML = document.getElementById("insert").innerHTML+insertText;   

           }else

                {
                     document.getElementById("insert").innerHTML = document.getElementById("insert").innerHTML.replace("<table><tbody><tr><td>"+modelId+"被選中</td></tr></tbody></table>","");   
             }    
          }
  </script>
</head>
<body>
        <input id="Checkbox1" type="checkbox" onclick="AddOrDelModel('Checkbox1')" value="checkbox1" name="CheckBox1" />
        <input id="Checkbox2" type="checkbox" onclick="AddOrDelModel('Checkbox2')" value="checkbox2" name="CheckBox2" />

    <div id="insert"></div>
</body>

要實現的功能選中checkbox1、checkbox2界面分別顯示添加checkbox1、checkbox2被選中,取消選擇則分別移除添加的內容.
使用firefox調試顯示在添加table的時候會自動多添加<tbody>標簽
現在在firefox和chrome運行沒有問題,但是其他的瀏覽器(ie、搜狗等瀏覽器)就不行了。

 

回答:

function AddOrDelModel(modelId){
        var insertText = '<table tag=' + modelId + '><tr><td>' + modelId + '被選中</td></tr></table>', insertEl = document.getElementById("insert");
        if(document.getElementById(modelId).checked){
                insertEl.innerHTML = insertEl.innerHTML + insertText;
                }else{
                        var tables = insertEl.getElementsByTagName("table");

            for(var i = 0; i < tables.length; i++){
                if(tables[i].tag = modelId){
                    insertEl.removeChild(tables[i]);
                        break;
                    }
                }
            }
    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM