用两个替换一个DOM节点？ [英] Replace one DOM node with two?
问题描述
我有一个关于操作文档的问题。假设例如
，我有一个这样的表：
< table>
< tr id =" row1">
< td> R1C1< / td>
< / tr>
< tr>
< td> R2C1< / td>
< / tr>
< / table>
我想要做的是向row1添加一个onclick事件处理程序，在row1之后插入一个
行。我似乎找不到办法做到这一点。在创建新行节点后，我可以尝试使用
document.getElementById（" row1"）。parentNode.appendC hild（newNode）但
将新行添加到表格的底部。
insertBefore（）方法是正确的想法，但我想在第1行之后插入新的
行，而且似乎没有insertAfter（）方法。
我想在浏览DOM树后获取
row1之后的行，然后使用insertBefore（）但生成表格
$动态b $ b，不一定是下一行。有什么想法吗？
-Brandon R.
I have a question about manipulating a document. Suppose for example
that I had a table like this:
<table>
<tr id="row1">
<td>R1C1</td>
</tr>
<tr>
<td>R2C1</td>
</tr>
</table>
What I want to do is add an onclick event handler to row1 to insert a
row after row1. I can''t seem to find a way to do it though. After
creating the new row node, I could try something like
document.getElementById("row1").parentNode.appendC hild(newNode) but
that would add the new row to the bottom of the table. The
insertBefore() method is the right idea but I want to insert the new
row AFTER row1 and there doesn''t seem to be an insertAfter() method.
I thought about navigating through the DOM tree to get the row after
row1 and then using insertBefore() but the table is generated
dynamically and there won''t necessarily be a next row. Any ideas?
-Brandon R.
推荐答案
哦，我想我可能应该已经提到过，如果可能的话，我也会决定用两个节点替换一个节点。我知道
有一个replaceNode（）方法，但有没有办法用两个< trnodes替换一个< tr>
节点？这将是一种黑客攻击，但我会以b
来满足它。
-Brandon
Oh, and I suppose I probably should have mentioned that I would also
settle for replacing one node with two if that is possible. I know
there is a replaceNode() method but is there a way to replace one <tr>
nodes with two <trnodes? It would be sort of a hack but I would
settle for it.
-Brandon
Brandon写道：
Brandon wrote:
我有一个关于操作文档的问题。假设例如
，我有一个这样的表：
< table>
< tr id =" row1">
< td> R1C1< / td>
< / tr>
< tr>
< td> R2C1< / td>
< / tr>
< / table>
I have a question about manipulating a document. Suppose for example
that I had a table like this:
<table>
<tr id="row1">
<td>R1C1</td>
</tr>
<tr>
<td>R2C1</td>
</tr>
</table>
如果你想操纵表中的行，那么
包含< tbodytags for IE是个好主意。 />
< table>
< tbody>
< tr id =" row1">
< td> R1C1< / td>
< / tr>
< tr>
< td> R2C1< ; / td>
< / tr>
< / tbody>
< / table>
我想要做的是向row1添加一个onclick事件处理程序，以便在row1之后插入一个
行。我似乎找不到办法做到这一点。在创建新行节点后，我可以尝试使用
document.getElementById（" row1"）。parentNode.appendC hild（newNode）但
将新行添加到表格的底部。
insertBefore（）方法是正确的想法，但我想在第1行之后插入新的
行，而且似乎没有insertAfter（）方法。
What I want to do is add an onclick event handler to row1 to insert a
row after row1. I can''t seem to find a way to do it though. After
creating the new row node, I could try something like
document.getElementById("row1").parentNode.appendC hild(newNode) but
that would add the new row to the bottom of the table. The
insertBefore() method is the right idea but I want to insert the new
row AFTER row1 and there doesn''t seem to be an insertAfter() method.
var r1 = document.getElementById（" row1"）;
r1.parentNode.insertBefore（newNode，r1.nextSibling）;
如果r1是parentNode中的最后一个子节点，则nextSibling为null，并且
newNode将插入列表的末尾。
彼得
var r1 = document.getElementById("row1");
r1.parentNode.insertBefore(newNode, r1.nextSibling);
If r1 is the last child in the parentNode then nextSibling is null and
the newNode will be inserted at the end of the list.
Peter
这就是诀窍。谢谢彼得。
顺便说一下，对于其他可能处于相同情况的人来说，表格中有insertRow（index）方法和行有
insertCell（索引）方法。这适用于表但只有表，所以如果
你正在处理div标签（就像我实际上最终会这样），
使用带有节点'的insertBefore（） nextSibling似乎是通过
去的方式。
-Brandon
That did the trick. Thanks Peter.
By the way, to anyone else who might be in the same situation, it turns
out that tables have insertRow(index) methods and rows have
insertCell(index) methods. That works for tables but only tables so if
you are dealing with div tags (like I actually will be eventually,)
using insertBefore() with a node''s nextSibling appears to be the way to
go.
-Brandon
这篇关于用两个替换一个DOM节点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
