0

我已经在 HTML 中创建了一个 div，并希望向其中动态添加内部 div。下面是 HTML 的代码。

<div id="table">
    <div class="row">
        This is the Demo First row Content.
        <div class="cell1">
            Cell 1 Content
        </div>
        <div class="cell2">
            Cell 2 Content
        </div>
    </div>
    <div class="row">
        This is the Demo Second row Content.
        <div class="cell1">
            Cell 1 Content
        </div>
        <div class="cell2">
            Cell 2 Content
        </div>
    </div>
</div>

<input type="button" value="Add New Row" onclick="addNewRow()"  />

我的CSS是

div {
       border: 1px dotted red;
       padding: 10px;    
    }

我已经为它完成了 javaScript，但它不起作用。JavaScript 是

function addNewRow {
    var table = document.getElementById('table');

    var rDiv = document.createElement('div');

    table.appendChild(rDiv);

    rDiv.innerHTML = "This is the Demo Third row Content.";

    var c1Div = document.createElement('div');
    rDiv.appendChild(c1Div);
    c1Div.innerHTML = "Cell 1 Content";

    var c2Div = document.createElement('div');
    rDiv.appendChild(c2Div);
    c2Div.innerHTML = "Cell 2 Content";
}

但是当我执行它时。不会添加新行。请指导我缺少什么。

问候，
迪内什

4

3 回答 3

2

您有一个拼写错误，阻止了函数的执行。正确的名称是document.getElementById（JS 中的第 2 行）。

您可能希望启用控制台（F12 IE 调试器、Firebug、开发工具等）以进行下次调试。这些类型的错误很容易被发现。

这是一个有效的 JsBin：http: //jsbin.com/egImArO/1/edit

于 2013-09-18T14:20:51.533 回答
0

只需用这个替换第一个 js 代码行：-

函数 addNewRow(){

于 2013-09-21T05:53:20.950 回答
0

定义 javascript 函数，例如function addNewRow() {不是函数 addNewRow {

于 2013-09-18T14:41:35.357 回答