[英]Dynamically append Div in HTML javascript
我在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函数,如函数addNewRow(){ not a function addNewRow {
只需用这一个替换第一个js代码行: -
function addNewRow(){
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.