cloneNode
You can use the cloneNode method to duplicate existing elements.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<table border="1">
<tbody id="SurveysBody">
<tr><td class="sum">A</td><td class="result">B</td></tr>
</tbody>
</table>
<button id="add">Add Row</button>
<script>
var tableBody = document.getElementById("SurveysBody");
document.getElementById("add").onclick = function() {
var count = tableBody.getElementsByTagName("tr").length + 1;
var newElem = tableBody.getElementsByTagName("tr")[0].cloneNode(true);
newElem.getElementsByClassName("sum")[0].firstChild.data = count + " + " + count;
newElem.getElementsByClassName("result")[0].firstChild.data = count * count;
tableBody.appendChild(newElem);
};
</script>
</body>
</html>
Home
JavaScript Book
DOM
JavaScript Book
DOM
HTMLElement:
- The HTMLElement Members
- element tag name, id, direction, language, hidden disabled information
- addEventListener
- appendChild
- attributes returns a collection containing all of the attributes
- classList
- className
- cloneNode
- createElement
- createTextNode
- dataset
- getAttribute
- getElementsByTagName
- hasAttribute
- innerHTML
- insertAdjacentHTML
- insertBefore
- isSameNode
- outerHTML
- onmouseout
- onmouseover
- querySelectorAll
- removeEventListener