实际上我正在制作一个todolist，所以我想用tr替换我在innerhtml中添加的div，并在html中创建第一行之后

Question

实际上我正在制作一个 todolist，所以我想用 tr 替换我在 innerhtml 中添加的 div 并在 html 中创建第一行后请检查

Html Part:

<table id="ws-table" class="table table-bordered">
    <tr id="insert">
        <th>#</th>
        <th>Date</th>
        <th>Items</th>
        <th>Edit / Delete</th>
     </tr>
    <!-- Here i wanted an tr
</table>

实际上我正在制作一个 todolist，所以我想用 tr 替换我在 innerhtml 中添加的 div 并在 html 中创建第一行后请检查

javascript part :

                var takeInput;
            var DATA = [];
            load();

            function insertItem(){
                takeInput = document.getElementById('item').value;

                DATA.push(takeInput);
                renderJson(DATA);
                document.getElementById('item').value = "";
            }

            function renderJson(data){
                document.getElementById('container').innerHTML = "";

                for(var i in data){
                    container.innerHTML = container.innerHTML + "<div id=" + i + " onclick='removeItem(this.id)'><input type='checkbox'/><label>"+data[i]+"</label></div>";
                }
                save();
            }

            function removeItem(Id){
                var itemId = document.getElementById(Id);

                if(itemId.childNodes[0].checked == true){
                    var arr_ind = DATA.indexOf(itemId.childNodes[1].innerText);
                    DATA.splice(arr_ind,1);

                    itemId.parentNode.removeChild(itemId);
                    save();
                }
            }

            function save(){
                localStorage.myList = JSON.stringify(DATA);
            }

            function load(){
                DATA = JSON.parse(localStorage.myList);
                renderJson(DATA);
            }

Answer 1

Element.innerHTML 仅用于替换，因此您需要先将其与新行连接，然后再返回，最好使用Element.insertAdjacentHTML()：

var row = "<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>";
document.querySelector("#ws-table tbody").insertAdjacentHTML("beforeend", row);

您可能希望使用thead 作为表头。查看此thread 了解更多信息。