DOM如何在指定位置添加表格行

Question

DOM如何在指定位置添加表格行

3

可能是重复问题：
如何在不使用库的情况下在JavaScript中执行insertAfter()函数?

目前这个脚本会在表格底部添加一行。我该怎样让它在特定的行后面添加？或者在表格顶部添加？

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

我一直在谷歌上搜索学习资料，但是我总是遇到jQuery、innerhtml和insertrow的答案。

- markerpower

你想避免使用jQuery吗？ - Justin

嗯，另一个问题有点相似。肯定有比那个更好的重复问题。 - rlemon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rlemon · Accepted Answer

您正在寻找 node.insertBefore() https://developer.mozilla.org/zh-CN/docs/Web/API/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。