如何转换HTML DOM结构

Question

我对我的网页有不同的要求。为此，我需要更改DOM元素。我将通过AJAX从服务器获得html。Html来自服务器，因为不同的页面是不同的。喜欢,

<h1> Some text </h1>
Text out of tags
<div> 
 <p> Text in div </p>
 <img src="some-image.jpg" />
</div>
<p> <a href="#"> Some other text </a> </p>
<p> Some other text </p>
<img src="some-image.png" />

差不多吧。

当它出现在网页上时，它就像，

标记外的一些文本

div 中的文本和图像

其他一些案文

其他一些案文

另一个图像

因此，我需要的是，使用Javascript或jQuery转换上述HTML结构，如下所示。

<p> Some text Text out of tags Text in div</p>
<img src="some-image.jpg" />
<p> Some other text </p>
<p> Some other text </p>
<img src="some-image.png" />

我只想要通过<p>标签的文本和通过<img>标签的图像。我不需要所有其他的东西。

如果可能的话，请帮帮我。任何帮助都将不胜感激。

Answer 1

您可以使用

$("<selector>").contents().unwrap();

所有要删除的元素。例如：

​

$(document).ready(function() {
  $('h1, div, a').contents().unwrap();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> <h1> Some text </h1> </p>
<div> <img src="some-image.jpg" /> </div>
<p> <a href="#"> Some other text </a> </p>
<p> Some other text </p>
<img src="some-image.png" />

​

Answer 2

类似于这个问题删除父元素，但在HTML中保留使用jquery的子元素

使用replaceWith()并返回所需的元素

Answer 3

您可以操作/编辑从服务器接收的DOM结构。若要隐藏某些<div>或<p>元素，请尝试以下操作：

document.getElementById("divWithImage").style.display = "none";
                                                        ^^^^^^

当然，这将隐藏内部的所有内容，因此您应该获得内部内容(如<img> )，并将它们再次注入到所需位置的DOM中。