我有这样的例子:
<td "class=name">
<span class="removed">one</span>
<span class="added">two</span>
</td>
或这个:
<td class=name> one
<span class="removed">two</span>
<span class="added">three</span>
</td>
或这个:
<div>
one
<span class="added">two</span>
three four
<span class="removed">five</span>
six
</div>
并希望使用 JavaScript(不带 JQuery)将其更改为:
<td "class=name">
two
</td>
或这个:
<td class=name>
one
three
</td>
或这个:
<div>
one
two
three
four
six
</div>
想不通。只找到了很多jquery的东西,比如replaceWith等等,但是需要纯javascript
最佳答案
如果您想要删除的所有跨度标签都有一个删除或添加的类,并且使用该类测试它们不会影响您的任何其他 html,您可以尝试这个。
var spans = document.getElementsByTagName("span");
for(var i=0; i<spans.length;i++)
{
if(spans[i].className == "added")
{
var container = spans[i].parentNode;
var text = spans[i].innerHTML;
container.innerHTML += text;
container.removeChild(spans[i]);
}
else if(spans[i].className == "removed")
{
var container = spans[i].parentNode;
container.removeChild(spans[i]);
}
}
否则,您需要通过 ID 或类名找到一种方法来获取 span 标签的容器并执行类似的操作。例如像这样
var myDiv = document.getElementById("myDiv");
var spans = myDiv.getElementsByTagName("span");
for(var i=0; i<spans.length;i++)
{
if(spans[i].className == "added")
{
var text = spans[i].innerHTML;
}
myDiv.innerHTML += text;
myDiv.removeChild(spans[i]);
}
希望这可以帮助
编辑
尝试 here 以了解如何使用
getElementsByClassName()
函数来实现此代码,这可能会简化此过程。它返回一个类似 getElementsByTagName()
的数组,您可以对其进行迭代。关于javascript - 删除 span - 标签并将内容保留在 <td> 父标签中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12578945/