获取“\[object HTMLDivElement\]”而不是其内容？

Question

我只想在一个新的 div 中创建原始副本 div s 一个案例 -

案例 1： 复制那些具有 favourite 类的 div 到一个新的 id fav_items 中。

我已经尝试过-

我尝试了 innerHTML 和 appendChild() 方法。

当我尝试 innerHTML 然后它给出了 [object HTMLDivElement] 而不是真实内容。

当我尝试 appendChild() 方法时，它将 div 从其原始位置移动到新的 div。

代码 ：

HTML

 <div id="blog-posts">
      <div class="favourite">
        <p>Item 1.</p>
       <div>
       <div class="item">
        <p>Item 2.</p>
       <div>
       <div class="favourite">
        <p>Item 3.</p>
       <div>
</div>

<!-- Favourite Added items---------->
    <div id="cart_items">
        <h2>Your items :</h2>
    </div>

Javascript 使用 innerHTML

 var cart_div = document.getElementById("cart_items");
      var fav_items = document.getElementsByClassName("favorite");
      for(let i = 0; i< fav_items.length; i++){
      cart_div.innerHTML += fav_items[i];
      }

Javascript 使用 appendChild()

 var cart_div = document.getElementById("cart_items");
      var fav_items = document.getElementsByClassName("favourite");
      for(let i = 0; i< fav_items.length; i++){
      cart_div.appendChild(fav_items[i]);
      }

但是当我使用 appendChild() 方法时，它将类的 div favourite 从它的原始位置移动到新的 id cart_items

使用 innerHTML 进行代码预览

  var cart_div = document.getElementById("cart_items");
 var fav_items = document.getElementsByClassName("favourite");
          for(let i = 0; i< fav_items.length; i++){
          cart_div.innerHTML += fav_items[i];
          }

 <div id="blog-posts">
          <div class="favourite">
            <p>Item 1.</p>
           <div>
           <div class="item">
            <p>Item 2.</p>
           <div>
           <div class="favourite">
            <p>Item 3.</p>
           <div>
    </div>

    <!-- Favourite Added items---------->
        <div id="cart_items">
        	<h2>Your items :</h2>
        </div>

使用 appendChild() 进行代码预览

 var cart_div = document.getElementById("cart_items");
var fav_items = document.getElementsByClassName("favorite");
      for(let i = 0; i< fav_items.length; i++){
      cart_div.appendChild(fav_items[i]);
      }

 <div id="blog-posts">
          <div class="favourite">
            <p>Item 1.</p>
           <div>
           <div class="item">
            <p>Item 2.</p>
           <div>
           <div class="favourite">
            <p>Item 3.</p>
           <div>
    </div>

    <!-- Favourite Added items---------->
        <div id="cart_items">
        	<h2>Your items :</h2>
        </div>

那么如何将类 favourite 的 div 显示到 id cart_items 的 div？

原文由 Abhishek kamal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

var cart_div = document.getElementById("cart_items");
var fav_items = document.getElementsByClassName("favourite");
for(let i = 0; i< fav_items.length; i++){
cart_div.innerHTML += fav_items[i].innerHTML;
}

我认为通过将 innerHTML 添加到 fav_items，您将获得里面的内容。此外，您还输入了类名“favorite”而不是“favourite”的拼写错误。

原文由 JensW 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

尝试 .outerHTML 而不是 .innerHTML ，

 var cart_div = document.getElementById("cart_items");
var fav_items = document.getElementsByClassName("favourite");
for(let i = 0; i< fav_items.length; i++){
  cart_div.innerHTML += fav_items[i].outerHTML;
}

原文由 Rmaxx 发布，翻译遵循 CC BY-SA 4.0 许可协议