javascript - 删除所有标签并创建一个包装内部 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

提取所有 p 的 textContent，从文档中删除所有现有的 p，然后创建一个新的 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>