使用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標記。