使用 JavaScript 组合 HTML 段落

combine html paragraphs using javascript

本文关键字：段落 HTML 组合 JavaScript 使用      更新时间：2023-09-26

我目前正在为一个非常简单的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.concat（p2），但这不起作用。我将其用作外部文件，因此我可能也错过了在我的HTML文件中放置某些内容的机会。

编辑会更改问题。

我可能会做的是遍历.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() { ... });的事情是一种循环遍历任何类似于数组但不是数组的方法。在另一个答案中对此进行了更多解释，该答案也有多种选择。

相关文章：