Question

我想仅使用JavaScript删除两个标签之间的所有内容（没有jQuery或类似的东西）。我也无法修改我想要删除的内容。

例如，对于以下代码：

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

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

Answer 1

您可以使用以下内容：

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或类似的东西中，只删除这一个标签。使您和其他可能需要查看代码的人更加简单。

Answer 2

由于您无法修改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，因为这可能会破坏解决方案。

Answer 3

基于前提：

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

以及上面的评论：

另外，我要说我无法修改内容

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

使用getElementByTagName（）找到img-tag，然后删除之前的所有子节点。
使用document.removeChild（）并使用固定的子节点索引（如果项目的索引是固定的）

两种解决方案都严重依赖于未来不会发生变化的DOM。我强烈建议使用jQuery或其他一些框架来简化（和跨浏览器兼容）。

JavaScript删除某些标记之间的所有内容

3 个答案: