JS动态添加Html_js 动态添加html

append只能动态添加下一级，添加下下级添加会出现源码，也就是添加失败。
如动态添加表格：
html内容:

        <tr>
            <td>
                <input type="text" name="" style="text-align: center;width: 100px" placeholder="分类名">
            </td>
            <td>
                <input type="text" name="" style="text-align: center;width: 60px" placeholder="优先级">
            </td>
            <td>
                <input type="button" onclick="" style="text-align: center;width: 60px; border: 1px solid #467DB9; color: #467DB9;border-radius: 5px;"  value="删除">
            </td>
        </tr>

        </tbody>
    </table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

js正确添加行，创建新的一级tr，tr下一级td可以通过innerhtml创建，如果哦td也通过createElement，会出现td的css失效:
var tb=document.getElementById(“tbbody”);
var tr = document.createElement(“tr”);
tr.innerHTML = " \n" +
" <input type=“text” name="" style=“text-align: center;width: 100px” placeholder=“分类名”>\n" +
" \n" +
" \n" +
" <input type=“text” name="" style=“text-align: center;width: 60px” placeholder=“优先级”>\n" +
" \n" +
" \n" +
" <input type=“button” οnclick="" style=“text-align: center;width: 60px; border: 1px solid #467DB9; color: #467DB9;border-radius: 5px;” value=“删除”>\n" +
" ";
tb.appendChild(tr);

js错误添加(因为直接连续添加了两个子级tr td):
var tb=document.getElementById(“tbbody”);

var html = " "  <tr>\n" +
	"                <td>\n" +
	"                    <input type=\"text\" name=\"\" style=\"text-align: center;width: 100px\" placeholder=\"分类名\">\n" +
	"                </td>\n" +
	"                <td>\n" +
	"                    <input type=\"text\" name=\"\" style=\"text-align: center;width: 60px\" placeholder=\"优先级\">\n" +
	"                </td>\n" +
	"                <td>\n" +
	"                    <input type=\"button\" onclick=\"\" style=\"text-align: center;width: 60px; border: 1px solid #467DB9; color: #467DB9;border-radius: 5px;\"  value=\"删除\">\n" +
	"                </td>\n" +
	"            </tr>";";
tb.appendChild(html);
1
2
3
4
5
6
7
8
9
10
11
12