使用javascript合并html段落

Question

我目前正在一个非常简单的javascript任务上挣扎，但我对它并不熟悉，所以它让我很困惑。

例如html

<div class="item">
            <div class="title">Item 1 Title</div>
            <div class="description-1">lorum</div>
            <div class="description-2">ipsum</div>
            <div class="description-combined"></div>
        </div>

所以我需要把第1和第2段结合起来，并替换第3段中的空信息。我还没有使用jQuery，所以我的研究因此而引起了斗争。我目前有：

var p1 = getElementsByClassName ('description-1').innerHTML;
var p2 = getElementsByClassName ('description-2').innerHTML;
var p3 = p1 + P2
document.getElementsByClassName ('description-combined').innerHTML = p3

我确实有p3拥有p1.conat(P2)，但这是行不通的。我正在使用它作为一个外部文件，所以我可能也错过了在我的HTML文件中放一些东西。

Answer 1

编辑会更改问题。

我可能要做的是循环遍历.item元素，结合内部的描述。

document.getElementsByClassName是document的属性，而不是独立的函数，它返回匹配元素的列表。它也不像document.querySelector和document.querySelectorAll那样得到广泛的支持，所以我可能会使用它们；对于我们正在讨论的内容，我们还需要Element#querySelector。

​

// Get a list of the items and loop through it
Array.prototype.forEach.call(document.querySelectorAll(".item"), function(item) {
  // Get the two description divs, and the combined, that
  // are *within* this item
  var d1 = item.querySelector(".description-1");
  var d2 = item.querySelector(".description-2");
  var c  = item.querySelector(".description-combined");
  
  // Set the combined text (this assumes we have them all)
  c.innerHTML = d1.innerHTML + d2.innerHTML;
});

.description-combined {
  color: green;
}

<div class="item">
  <div class="title">Item 1 Title</div>
  <div class="description-1">One description 1</div>
  <div class="description-2">One description 2</div>
  <div class="description-combined"></div>
</div>
<div class="item">
  <div class="title">Item 2 Title</div>
  <div class="description-1">2 description 1</div>
  <div class="description-2">2 description 2</div>
  <div class="description-combined"></div>
</div>
<div class="item">
  <div class="title">Item 3 Title</div>
  <div class="description-1">3 description 1</div>
  <div class="description-2">3 description 2</div>
  <div class="description-combined"></div>
</div>

​

Array.prototype.forEach.call(list, function() { ... });是一种循环遍历任何类似数组但不是数组的方法。在this other answer中有更多的解释，它也有几种选择。