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 DOM结构转换为如下。

<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();

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 2

与此问题类似remove parent element but keep the child element using jquery in HTML

使用replaceWith()并返回您想要的元素

Answer 3

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

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

当然这会将所有内容隐藏起来，所以你应该抓住像<img>这样的内部内容，并在DOM中的所需位置再次注入它们。

如何转换HTML DOM结构

3 个答案: