Think how twitter appends a chunk of list items to the end of the list when you load more results.
I’m trying to achieve the same thing without replacing the entire parent with the same content each time ‘appendRows1()’
The function needs to support any type of content - the children could be tr’s li’s etc.
Or is the first version fine?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>js</title>
</head>
<body>
<script>
function appendRows1() {
var tbody = document.getElementById('tbody');
tbody.innerHTML = tbody.innerHTML + '<tr><td>a</td><td>b</td></tr><tr><td>a</td><td>b</td></tr><tr><td>a</td><td>b</td></tr>';
}
function appendRows2() {
var tbody = document.getElementById('tbody');
var div = document.createElement('div');
div.innerHTML = '<tr><td>a</td><td>b</td></tr><tr><td>a</td><td>b</td></tr><tr><td>a</td><td>b</td></tr>';
var children = div.childNodes;
console.log(children);
for (var i=0, ii=children.length; i<ii; i++) {
tbody.appendChild(children[i]);
}
}
</script>
<table>
<tbody id="tbody">
<tr><td>a</td><td>b</td></tr>
<tr><td>a</td><td>b</td></tr>
<tr><td>a</td><td>b</td></tr>
</tbody>
</table>
<p><a href="#" onclick="appendRows1(); return false;">appendRows1()</a></p>
<p><a href="#" onclick="appendRows2(); return false;">appendRows2()</a></p>
</body>
</html>
Thanks,