JavaScript删除一些标签之间的所有内容

JavaScript remove all content between some tags

本文关键字：之间 删除 标签 JavaScript      更新时间：2023-09-26

我想只使用JavaScript删除两个标签之间的所有内容(没有jQuery或类似的东西)。我也不能修改我想删除的内容。

例如:

<body>
<p>Remove me</p>
<a href="#">Me too</p>
<img src="But don't me!"/>
(...)

我想删除<body>和<img/>之间的所有内容

你可以这样写:

var children = document.body.childNodes;
for(var i = 0; i < children.length; i++)
{
    if(children[i].tagName == 'IMG')
        break;
    document.body.removeChild(children[i]);
}

试一下，它应该工作，但这是一个严格的例子，你在示例代码中有完全相同的结构。通常，您会获得想要删除的内容的父元素。然后一个接一个地删除标签，直到你遇到你不想删除的标签。这可以工作，但我不推荐它-将内容包装在一个div或类似的东西，并删除这一个标签。为您和其他可能需要查看代码的人简化了很多事情。

基于前提:

我想删除两个标签之间的所有内容仅使用JavaScript(没有jQuery或类似的东西)。

和上面的注释:

假设我不能修改内容

如果你不能给元素添加id或将它们包装在某个容器中，我可以看到两个解决方案。

  • 使用getElementByTagName()来定位img-tag，然后删除它之前的所有子节点。
  • 使用document.removeChild()并使用固定子节点索引(如果项的索引是固定的)

这两种解决方案都严重依赖于将来不会更改的DOM。我强烈建议使用jQuery或其他框架使事情变得更容易(并且跨浏览器兼容)。

由于不能修改HTML或使用库，因此可以尝试使用getElementsByTagName来检索节点

  • getElementsByTagName (p) [0]
  • getElementsByTagName("a")[0]

然后这取决于你是否希望他们的标签仍然在那里，但没有内容，或者如果你希望标签也被删除。如果您希望删除内容，但出于某种原因保留空节点，请尝试设置

  • var aNode = document.getElementsByTagName('a')[0];
  • aNode.innerHtml = " ";

如果要删除完整的节点，请按照前面提到的操作:

  • var pNode = document.getElementsByTagName('p')[0];
  • pNode.parentNode.removeChild (pNode);

当然，您必须注意DOM将来不会更改，因为这可能会破坏解决方案。

相关文章：