我已经在 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";
}
但是当我执行它时,没有添加新行。请指导我缺少什么。
最佳答案
您有一个拼写错误,导致该函数无法执行。
正确的名称是 document.getElementById
(JS 中的第 2 行)。
您可能希望在下次调试时启用控制台(F12 IE 调试器、Firebug、开发人员工具等)。这类错误很容易被发现。
这是一个正在运行的 JsBin:http://jsbin.com/egImArO/1/edit
关于javascript - 在 HTML JavaScript 中动态追加 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18874595/