Javascript：在循环中将文字HTML结果加在一起

JS 新手。我能找到的所有标题与我的标题相似的问题都太复杂了，我无法理解。

简单地说，我试图遍历一个数组并在最后返回一个结果，该结果基本上将数组的所有值添加/连接在一起。

但是，我似乎无法让它工作，因为数组中的项目是 HTML 代码块，而不是简单的字符串或数字。这是一个简化版。

HTML：

<article class="wrapper"><p>Some text 1.</p></article>
<article>No class.</article>
<article class="wrapper"><p>Some text 2.</p></article>
<article>No class.</article>
<article class="wrapper"><p>Some text 3.</p></article>

我试图找出一种方法来结束这段代码的模板文字：

<article class="wrapper"><p>Some text 1.</p></article>
<article class="wrapper"><p>Some text 2.</p></article>
<article class="wrapper"><p>Some text 3.</p></article>

这样我就可以将整个内容作为另一个页面上另一个元素的 innerHTML 注入。

从这个JS开始：

articleArray = document.querySelectorAll('.wrapper').outerHTML;
console.log(articleArray)
// This will return an array with the full HTML of the 3 "wrapper" articles as each item

然后尝试创建一个循环，该循环将在第一个循环中获取第 1 项的完整 HTML，并将其设置为类似于累加器值的内容。然后在第二个循环中，它将获取第 2 项的完整 HTML 并将其直接连接到第 1 项，这将是新的累加器值。等等。

对于我在现实生活中应用它的内容，我有超过 3 个项目，否则我可以做一些类似 articleArray[0] + articleArray[1] + articleArray[2] 的事情。

我尝试了一百万次，但这里是最接近的尝试：

1. 日志记录

var articleArray = document.querySelectorAll('.wrapper').outerHTML;
for (i = 0; i < searchWrappers.length; i++) {
  searchWrapper = articleArray[i];
  console.log(searchWrapper);
}
// Console log brought back 3 objects, but I need to combine them

2. 串联

var articleArray = document.querySelectorAll('.wrapper').outerHTML;
var searchStr = ''
for (i = 0; i < articleArray.length; i++) {
  itemHTML = articleArray[i];
  fullString = searchStr += itemHTML;
  console.log(fullString);
}
// This did concatenate the 3 items, but only as:
// [object HTMLElement][object HTMLElement][object HTMLElement]
// and not the actual HTML

3. 连接和记录

const articleArray = document.querySelectorAll('.wrapper').outerHTML;
const sum = articleArray.reduce((accumulator, value) => 
  $(accumulator).concat($(value)));
console.log(sum);
// This brought back a normal array of the 3 items again

任何帮助表示赞赏！

编辑：感谢您的所有回复！我现在将通过它们并在我的真实代码上测试您的解决方案，看看什么最有效。