Как преобразовать структуру HTML DOM

Question

У меня разные требования для моей веб-страницы. Для этого мне нужно изменить элементы DOM. У меня будет html с сервера через AJAX. 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 изображение

другой текст

Некоторые другой текст

Другое изображение

Так что мне нужно, я хочу преобразовать вышеуказанную структуру HTML DOM следующим образом, используя Javascript или jQuery.

<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

Подобно этому вопросу remove parent element but keep the child element using jquery in HTML

replaceWith() использования и вернуть элемент, который вы хотите

Answer 2

Вы можете управлять/редактировать структуру DOM, полученные от сервера. Для того, чтобы скрыть определенные <div> или <p> элементов, попробуйте следующее:

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

Конечно, это скроет все внутри, так что вы должны овладеть внутреннее содержимое, как <img> и ввести их снова в DOM в нужном месте.

Answer 3

Вы можете использовать

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