在array.slice之后删除array.join中的持久逗号

Question

我在遍历每个元素然后将它们推到一个新数组之后，创建了一个新的HTML元素数组。然后，我尝试对数组进行切片（它可以工作，但会在每个项目后插入一个逗号）。然后，我使用.join删除逗号，但是没有，为什么？

var shortReviews = [];
var elm = document.getElementsByClassName('reviewContainer');
for (var i = 0; i < elm.length; i++) {
shortReviews.push(elm[i].innerHTML);
}

var snappy = document.querySelector("#reviewsSnap").innerHTML = shortReviews.slice(0, 2);
snappy.join('');

如果在控制台中调用'snappy'，则将数组用逗号（，）隔开，但是当我使用snappy.join（''）时，会在控制台中获得所需的输出而没有逗号，但是在页面输出中，逗号仍然存在。我想从snappy.join（''）中删除逗号并输出不带逗号分隔符的内容吗？

Answer 1

只需将join()链接到切片数组：

document.querySelector("#reviewsSnap").innerHTML = shortReviews.slice(0, 2).join('')

Answer 2

而不是使用HTML，请考虑处理DOM节点。由于HTML难以管理，因此这是一种更干净，更可靠的解决方案。这是使用DOM API克隆节点并将其添加到新父节点的方法：

var shortReviews = [];
var elm = document.getElementsByClassName('reviewContainer');
for (var i = 0; i < elm.length; i++) {
  //create a copy of the nodes
  shortReviews.push(elm[i].cloneNode(true));
}

var newContainer = document.querySelector("#reviewsSnap");
shortReviews
  .slice(0, 2) //take the first two
  .forEach(el => newContainer.appendChild(el)); //add them to the new container

.reviewContainer {
  border: 1px solid red;
}

#reviewsSnap .reviewContainer {
  border: 1px solid blue;
}

<div class="reviewContainer">
  <h3>short review 1</h3>
  <p>very short review: good</p>
</div>
<div class="reviewContainer">
  <h3>short review 2</h3>
  <p>very short review: average</p>
</div>
<div class="reviewContainer">
  <h3>short review 3</h3>
  <p>very short review: bad</p>
</div>

<div id="reviewsSnap">
  <h1>Chosen reviews</h1>
</div>

如果要移动节点，则无需复制两个节点，只需删除克隆步骤即可。每个节点只能有一个父节点，因此，如果将其添加到新节点，它将从第一个父节点中删除：

var shortReviews = [];
var elm = document.getElementsByClassName('reviewContainer');
for (var i = 0; i < elm.length; i++) {
  //don't copy, take the actual nodes
  shortReviews.push(elm[i]);
}

var newContainer = document.querySelector("#reviewsSnap");
shortReviews
  .slice(0, 2) //take the first two
  .forEach(el => newContainer.appendChild(el)); //add them to the new container

.reviewContainer {
  border: 1px solid red;
}

#reviewsSnap .reviewContainer {
  border: 1px solid blue;
}

<div class="reviewContainer">
  <h3>short review 1</h3>
  <p>very short review: good</p>
</div>
<div class="reviewContainer">
  <h3>short review 2</h3>
  <p>very short review: average</p>
</div>
<div class="reviewContainer">
  <h3>short review 3</h3>
  <p>very short review: bad</p>
</div>

<div id="reviewsSnap">
  <h1>Chosen reviews</h1>
</div>