inserting row in the middle of a html table using javascript

Question

I have a table which contains two rows.

<tr id="row1"><td>first row</td></tr>
<tr id="row2"><td>second row</td></tr>

I need to insert few rows between row1 and row2 using java script. I can achieve this by using java script create element. But I wish to add new rows using string html content. for example :

"<tr><td>This row is placed between first and second</td></tr>".insertAfter(first row Id);

is there way like this to add rows in between?

Answer 1

var newRow = document.createElement("tr");
newRow.innerHTML = "<td>This row is placed... etc.</td>";

var row2 = document.getElementById("row2");
row2.parentNode.insertBefore(newRow, row2);

Read up on it here: https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore

Answer 2

Use jQuery. There is a Function insertAfter();

$("#row1").insertAfter("your html");

http://jquery.com/