我想删除下面的span来自 div 的元素( <div id='foo'> ) 并附加新创建的节点而不是每个节点。
我正在使用循环遍历 div 的所有子项，对于找到的每个节点，我将使用 removeChild 删除它并附加一个新创建的节点。
我得到了o/p作为
<div id='foo'>
<SPAN>new text</SPAN>
</div>
我想要如下的o/p
<div id='foo'>
<SPAN>new text</SPAN>
<SPAN>new text</SPAN>
<SPAN>new text</SPAN>
</div>
问题代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id='foo'>
<SPAN>welcome to the world of translation.</SPAN>
<SPAN>Thank you for using it</SPAN>
<SPAN>visit again</SPAN>
</div>
<table border="0" cellspacing="5" cellpadding="0" class="lipi-header-logo-menu">
<tr>
<td align="left">
<SPAN>Hello</SPAN>
</td>
<td align="left">
World is not enough
</td>
</tr>
</table>
<div><a href="aa" id="id">this is a test</a></div>
<script>
var element = document.getElementById('foo');
seg = document.createElement('SPAN');
root_1_SPAN_1_text = document.createTextNode('new text');
seg.appendChild(root_1_SPAN_1_text);
if (element.hasChildNodes())
{
var children = element.childNodes;
for (var i = 0; i < children.length; i++)
{
if(children[i].nodeName=="#text")
{
continue;
}
element.removeChild(children[i]);
element.appendChild(seg);
};
};
</script>
</BODY>
</HTML>
提前致谢
最佳答案
您每次都重新附加相同的节点，这只是移动它(不会复制它)
更改此:
element.appendChild(seg);
到此
element.appendChild(seg.cloneNode(true));
关于javascript - 删除和追加节点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1171360/