在HTML javascript中動態附加Div

Question

我在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";
}

但是當我執行它時。 不添加新行。 請指導我缺少的東西。

問候，
迪內希

Answer 1

你有一個錯字阻止執行該功能。 正確的名稱是document.getElementById （JS中的第2行）。

您可能希望下次啟用控制台（F12 IE調試器，Firebug，開發人員工具等）進行調試。 這些錯誤很容易被發現。

這是一個有效的JsBin： http ：//jsbin.com/egImArO/1/edit

Answer 2

定義javascript函數，如函數addNewRow（）{ not a function addNewRow {

Answer 3

只需用這一個替換第一個js代碼行： -

function addNewRow（）{