javascript - 如何使用 JavaScript 追加第二个子元素？

Question

更新：我想通了！我只需要删除 JS 上的 .cloneNode() ，它现在就给了我正确的值。检查我的解决方案的底部代码。

我正在尝试在此服务单元格中附加第二个孩子。因此，具有数字营销文本的那个。

这是我的 HTML 代码

<div class="services-cell">
  <img class="services-cell_img" src="gallery/img-1.jpg" alt="">
  <h1 class="services-cell_text">Digital Marketing</h1>
</div>

这是JavaScript

if (galleryImages) {
  galleryImages.forEach(function(image, index) {
        image.onclick = function() {
            console.log(image.firstElementChild);

            getLatestOpenedImg = index + 1;

            let container = document.body;
            let newImgWindow = document.createElement('div');
            container.appendChild(newImgWindow);
            newImgWindow.setAttribute('class', 'img-window');
            newImgWindow.setAttribute('onclick', 'closeImg()');

            let newImg = image.firstElementChild.cloneNode();
            newImgWindow.appendChild(newImg);
            newImg.classList.remove('services-cell_img');
            newImg.classList.add('popup-img');
            newImg.setAttribute('id', 'current-img');

            let newTextDiv = document.querySelector('.img-window');
            let newText = document.createElement('div');
            newTextDiv.appendChild(newText)
            newText.setAttribute('class', 'img-text');
            newText.innerHTML = 'Hello'

         //This code below is working and solved my issue
               let imgTextValue = image.children[1];
          newText.appendChild(imgTextValue);
       console.log(imgTextValue);

所以现在JavaScript在我下面的HTML中创建了以下代码

<div class="img-window" onclick="closeImg()">
  <img class="popup-img" src="gallery/img-1.jpg" alt="" id="current-img">
  <div class="img-text">Hello</div>
</div>

但我想将 附加<div class="services-cell_text">Digital Marketing</div>到我的<div class="img-text">Hello</div>. 请注意，我有多个服务单元格，因此每个单元格都有不同的文本，这就是为什么我需要 .services-cell 中的第二个子元素，以便它显示正确的文本值。

所以如果一切正常，我试图实现的代码将如下所示

<div class="img-window" onclick="closeImg()">
  <img class="popup-img" src="gallery/img-1.jpg" alt="" id="current-img">
  <div class="img-text">
    <h1 class="services-cell_text">Digital Marketing</h1>
  </div>
</div>

所以我用这个更新了Javascript代码

   let imgTextValue = image.children[1].cloneNode();
       newText.appendChild(imgTextValue);
       console.log(imgTextValue);

这导致了以下代码

 <div class="img-window" onclick="closeImg()">
   <img class="popup-img" src="gallery/img-1.jpg" alt="" 
 id="current-img">
   <div class="img-text">
     <h1 class="services-cell_text"></h1>
   </div>
 </div>

所以它基本上是 99%，但问题是 H1 里面的文字没有显示出来？我不明白为什么如果我针对第二个子元素并且它清楚地显示了标签

标签： javascript