Question

我是一名初学者JS编码器，我在以下方面苦苦挣扎-有人可以帮忙吗？

我正在尝试使用一种功能，将一系列PNG添加到页面上，该功能将允许放置同一图像的多个副本，并且还为该图像的每个副本分配唯一的引用。

页面上未显示图像，加上console.log（）表明，下面的代码创建的2张图像在页面上的位置相同。

Character

为什么这些图片没有显示在页面中，为什么console.log（）表明创建的两个图片都使用相同的位置坐标？

Answer 1

您需要使用appendChild（）方法将生成的元素添加到DOM中。此外，实际上您只是在生成图像的单个实例，因为它仅在for循环之外发生。这就是为什么控制台为“两个”图像显示相同的屏幕位置的原因，因为实际上您是指相同的图像实例。

尝试一下：

function generateArrow(numArrows) {
  var img;
  for (i = 1; i <= numArrows; i++) {
    img = document.createElement('img');
    img.src = imgSrc;
    document.body.appendChild(img);
    window['arrow' + i] = img;
  }
}

Answer 2

创建新元素时，它仅存在于内存中-尚未将其添加到浏览器当前正在呈现的文档中。因此，仅创建新元素并对其进行配置是不够的。然后必须使用parentElement.appendChild(newChild)将它们注入DOM。

这是一个例子：

let newChild = document.createElement("img");
newChild.src = "https://static.scientificamerican.com/sciam/cache/file/D14B1C22-04F8-4FB4-95937D13A0B76545.jpg?w=590&h=393";

let parent = document.querySelector(".parent");
parent.appendChild(newChild); // <-- Now, inject the new element

img { width: 400px; }

<div class="parent"></div>

现在，在您的特定情况下，您遇到的问题不仅限于此。您一次只能创建一个新的图像元素，因为这样做的行不在循环内。另外，您在代码中使用arrow1引用arrow2和window['arrow' + i]的方式表示您已经在img个元素中设置了id个元素您的HTML，这不是理想的方法。接下来，比起在脚本中将CSS设置为嵌入式样式，提前将要使用的CSS设置为预制类要简单得多。

正如我上面的回答所表明的，您需要有一个父元素，其中将包含您创建的新元素，因此您的解决方案将看起来像这样：

var imgSrc = 'https://icon2.kisspng.com/20180320/rle/kisspng-arrow-computer-icons-clip-art-red-arrow-line-png-5ab19d059bfa98.5843437015215895096389.jpg';

// You can pick any pre-existing element to be the "parent"
var parent = document.getElementById("parent");

function generateArrow(numArrows) {

  for (i = 1; i <= numArrows; i++) { 
    // The creation of the elementt and it's configuration
    // need to be inside of the loop to make several of them
    var img = document.createElement('img');
    img.classList.add("position" + i); // Add pre-made CSS classes 
    img.src = imgSrc;
   
    parent.appendChild(img);  // Inject the new element inside of the parent 
  }
}

generateArrow(5);

/* 
  Instead of setting inline styles, use pre-made CSS classes
  that you can just connect or disconnect to/from
*/

/* All the injected images get this: */
#parent > img { width:40px; position:absolute; }

/* These get assigned individually */
.position1 { top:50px; left:50px; }
.position2 { top:100px; left:100px; }
.position3 { top:150px; left:150px; }
.position4 { top:200px; left:200px; }
.position5 { top:250px; left:250px; }

<div id="parent"></div>

Answer 3

通常，您可以使用document.appendChild(element);将元素添加到DOM中，或者使用document.appendChild(img);来添加元素。（或任何首选的父级，而不是document）

编辑：删除了第二部分地址变量声明，因为我没有注意到window["arrow" + i] = img。

Javascript –动态添加时未显示PNG

3 个答案: