Я создал div в HTML и хочу динамически добавить внутренний 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
(строка 2 в JS).
Возможно, вы захотите включить консоль (отладчик IE F12, Firebug, инструменты для разработчиков и т.д.) Для последующей отладки. Такие ошибки очень легко обнаружить.
Вот работающий JsBin: http://jsbin.com/egImArO/1/edit
Просто замените первую строку кода js следующим:
function addNewRow() {
определить функцию javascript как функцию addNewRow() { не функция addNewRow {