удалите все теги и создайте новый элемент, который обернет внутренний HTML-JavaScript

Question

Я совершенно новичок в javascript и не знаю, как лучше всего решить очень простую задачу.

Я должен удалить все <p> теги html-страницы и поместить все содержимое внутри уникальной <p> метки.

Какое может быть самое чистое решение для этого?

Текст:

<p> text1 </p>
<p> text2 </p>
....
<p> text n </p>

Ожидаемый результат:

<p>
text1,text2 ... text n
</p>

Я начал с этого, но я не знаю, что делать дальше:

var p = document.getElementsByTagName('body')[0]
                .getElementsByTagName('p'); //get all the p inside body 
var i;

Answer 1

Извлеките textContent из всех p s, удалите все существующие p s из документа, затем создайте новый p, у которого textContent - это остальные, соединенные разделителем, если хотите:

const ps = [...document.querySelectorAll('p')];
const newText = ps
  .map(({ textContent }) => textContent)
  .join(',');
ps.forEach(p => p.remove());
document.body.appendChild(document.createElement('p')).textContent = newText;

<p> text1 </p>
<p> text2 </p>
<p> text n </p>

Answer 2

Вы можете использовать следующий код, чтобы выполнить ваше требование.

org_html = document.getElementById("slidesContainer").innerHTML;
new_html = "<div id='slidesInner'>" + org_html + "</div>";
document.getElementById("slidesContainer").innerHTML = new_html;