DOM在我想要的地方添加表格行[重复]

Question

可能重复：
How to do insert After() in JavaScript without using a library?

目前，此脚本在表格底部添加一行。我如何告诉它在特定行之后添加它？在表的顶部？

<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>

我一直在搜索 Google 来学习，但我不断遇到 jQuery、innerhtml 和 insertrow 的答案。

Answer 1

您正在寻找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);

}

要添加到特定位置，您需要知道.children 中的索引。否则，一些关键标识符（类名、属性或 ID），您可以传递给 getBy 或 QSA。