DOM Add Table Row Where I Want It

Question

Possible Duplicate:
How to do insert After() in JavaScript without using a library?

Currently this script adds a row at the bottom of the table. How do I tell it to add it after a particular row? At the top of the table?

<script>
var i = 1;

function changeIt() {
var tr = document.createElement('tr');
var td = tr.appendChild(document.createElement('td'));
td.style.valign = 'middle';

var span = td.appendChild(document.createElement('span'));
span.style.fontWeight = 'bold';
span.appendChild(document.createTextNode('URL ' + i));

td = tr.appendChild(document.createElement('td'));
var input = td.appendChild(document.createElement('input'));
input.name = 'url' + ++i;
input.type = 'text';
input.size = '40'

document.getElementById('myTable').tBodies[0].appendChild(tr);

}
</script>

I've been searching Google to learn, but I keep coming across jQuery, innerhtml, and insertrow answers.

eh, the other question is kinda close. There is surly a better dupe than that. — rlemon, Dec 19 '12 at 00:40

rlemon · Accepted Answer · 2012-12-19T13:12:06.733

1

You're looking for node.insertBefore() https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore

var i = 1;

function changeIt() {
    var tr = document.createElement('tr');
    var td = tr.appendChild(document.createElement('td'));
    td.style.valign = 'middle';

    var span = td.appendChild(document.createElement('span'));
    span.style.fontWeight = 'bold';
    span.appendChild(document.createTextNode('URL ' + i));

    td = tr.appendChild(document.createElement('td'));
    var input = td.appendChild(document.createElement('input'));
    input.name = 'url' + ++i;
    input.type = 'text';
    input.size = '40'
    var node = document.getElementById('myTable').tBodies[0];
    node.insertBefore(tr, node.firstChild);

}

To add to a specific position you will need to know the index in the .children. Otherwise some key identifier (class name, attribute, or ID), something you can pass into a getBy or QSA.

edited Dec 19 '12 at 13:12

answered Dec 19 '12 at 00:31

rlemon

17,518
14
92
123

Consider using [NodeList](http://reference.sitepoint.com/javascript/NodeList) if you want to insert whatever you need in any other position, so you return the node and then use `insertBefore`. Also, consider using jQuery for heavy DOM editing, it's not that hard. – Carlos Vergara Dec 19 '12 at 00:35
lol, "consider using jQuery"... why? native DOM manipulation is *not that hard*. Don't boast to the OP to use a *Abstraction* library when they are clearly new to the language, it will only hurt them later. – rlemon Dec 19 '12 at 00:36
Furthermore, NodeList is horrible supported by IE, which includes whitespace and comments. [.children](https://developer.mozilla.org/en-US/docs/DOM/Element.children) on the otherhand only includes comment nodes in early IE. a lot easier to handle. – rlemon Dec 19 '12 at 00:37
Thanks for the advice. Is your modification suppose add a row at the top? New rows no longer appear. – markerpower Dec 19 '12 at 02:06
Ok. I had to change (node.firstChild, tr) to (tr, node.firstChild). – markerpower Dec 19 '12 at 02:39
@markerpower oops. my bad hehe. – rlemon Dec 19 '12 at 12:28

DOM Add Table Row Where I Want It

1 Answers1