javascript innerHTML打印错位

Question

<table class="privilage">
                <caption> These are the default users for institution </caption>
                <thead>
                    <tr>
                        <th>Users Name</th>
                        <th>User Id</th>
                        <th>Password</th>
                   </tr>
                </thead>
                <tbody>
                         <tr>
                            <td><input type="text" name='DefaultUser[]' value='' ><br></td>
                            <td><input type="text" name='DefaultUser_UserName[]' value=''></td>
                            <td><input type="password" name='DefaultUser_Password[]'></td>
                        </tr>


                <div id="New_User"></div>
                </tbody>
  </table> <table>
                    <tr>
                        <td><input type="button"   name="Add_New_User" value="Add new User" onclick="addRow()"></td>
                    </tr>
                </table>

上面的 HTML 有一个名为 New_User 的 div，我要求下面的 javascript 将 ussing innerHTML 打印到那个 div，但它打印到其他地方。

 function addRow()
 {
var d= document.getElementById("New_User");
d.innerHTML+="<tr><th><input type='text' name='DefaultUsers' value=''/> Manager<br></th><th><input type='text' name='UserName' value=''/></th><th><input type='password' name='Password'/></th></tr>";
}​

我只需要将这些新行添加到“权限”表中。欢迎任何考虑和帮助。提前致谢。

Jsfiddle code

Answer 1

很遗憾，您的 HTML DOM 结构无效。您不能像现在这样将 div 标记放入 tbody 中。 tbody 只能包含 tr 标签。

将 id New_User 提供给您的 tbody 标签，您的脚本就会运行。