使用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);
}

Answer 2

您创建了一个标签名称为img2的元素。这是浏览器无法解释的。

因此使用：

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("IMG");
  img2.setAttribute("src", "2.jpg");
  img2.setAttribute("width", "300");
  img2.setAttribute("height", "300");
  img2.setAttribute("alt", "The Pulpit Rock2");
  document.body.appendChild(img2);

只需忽略CSS img2{...}

Answer 3

只需将img2更改为img

document.createElement("IMG2")

收件人

document.createElement("img")

因为.createElement正在创建一个无效的HTML标签img2标签。