Question

我只想用一种情况在新div内创建原始div的副本-
案例1： 复制ID为favourite的新div内具有fav_items类的div。

我已经尝试过-
我尝试了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()方法时，它将类favourite的div从其原始位置移动到ID为cart_items的新div。

使用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？

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;
}

我认为，通过在fav_items中添加innerHTML，您将了解里面的内容。另外，您还有一个拼写错误，其类名是“收藏夹”而不是“收藏夹”。

Answer 2

设置innerHTML要求您编写原始HTML，因此它不适用于DOM对象列表-[object HTMLDivElement]表示。

appendChild是更好的选择，但是您需要复制现有节点（可能使用cloneNode（）或其他类似的DOM方法）。

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

2 个答案: