javascript - 使用javascript将两个图像加载到html

Question

我想将两个图像加载到我的 HTML 页面并使用 Javascript 将它们并排(水平)放置。但在第一步，会发生困惑。

这里我有一段代码，结果是这样的:

我该如何解决？我的错在哪里？

Javascript:

var img = document.createElement("IMG");
  img.setAttribute("src", "1.jpg");
  img.setAttribute("width", "300");
  img.setAttribute("height", "300");
  img.setAttribute("alt", "The Pulpit Rock");
  document.body.appendChild(img);

  var img2 = document.createElement("IMG2");
  img2.setAttribute("src", "2.jpg");
  img2.setAttribute("width", "300");
  img2.setAttribute("height", "300");
  img2.setAttribute("alt", "The Pulpit Rock2");
  document.body.appendChild(img2);

HTML:

<div id="IMG">
<div id="IMG2">

<script src="Script.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css">

CSS:

img {

   border: 1px solid #d6d6d6;
   padding: 6px;
   border-radius: 50%;
   box-shadow: 0 4px 8px 0 rgba(227, 228, 232), 0 6px 20px 0        rgba(227, 228, 232);  

}


img2 {

   border: 1px solid #d6d6d6;
   padding: 6px;
   border-radius: 50%;
   box-shadow: 0 4px 8px 0 rgba(227, 228, 232), 0 6px 20px 0        rgba(227, 228, 232);  

}

Answer 1

为您的img2 , 你有 var img2 = document.createElement("IMG2"); ，这将创建一个 <img2>元素。这需要更改为 var img2 = document.createElement("IMG");创建一个 <img>元素。

这可以从以下方面看出:

var img = document.createElement("IMG");
img.setAttribute("src", "http://placehold.it/100");
img.setAttribute("width", "300");
img.setAttribute("height", "300");
img.setAttribute("alt", "The Pulpit Rock");
document.body.appendChild(img);

var img2 = document.createElement("IMG");
img2.setAttribute("src", "http://placehold.it/100");
img2.setAttribute("width", "300");
img2.setAttribute("height", "300");
img2.setAttribute("alt", "The Pulpit Rock2");
document.body.appendChild(img2);

img {
  border: 1px solid #d6d6d6;
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 rgba(227, 228, 232), 0 6px 20px 0 rgba(227, 228, 232);
}

img2 {
  border: 1px solid #d6d6d6;
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 rgba(227, 228, 232), 0 6px 20px 0 rgba(227, 228, 232);
}