JavaScript/新增元素/練習

主題：建立元素和屬性

我們使用一個幾乎空的 HTML 頁面來進行練習。

<!DOCTYPE html>
<html>
<head>
  <script>
    function show() {
      "use strict";
      // ...
    }
  </script>
</head>

<body id="body" style="margin:2em">
  <h1>The magic creator</h1>
  <button id="buttonShow" onclick="show()">Start</button>
</body>
</html>

1. 修改 show 函式。

它建立一個包含“我的孩子之一”內容的段落 <p>。

點選檢視解決方案

function show() {
  "use strict";

  // create the paragraph
  const p = document.createElement("p");
  p.innerHTML = "One of my children";

  // integrate the paragraph into the body
  const body = document.getElementById("body");
  body.appendChild(p);
}

2. 修改 show 函式，以便它將列表新增到 HTML 頁面。

  <ul>
    <li>Albert</li>
    <li>Betty</li>
    <li>Charles</li>
  </ul>

點選檢視解決方案

function show() {
  "use strict";

  // create the list
  const ul = document.createElement("ul");

  // create and add the items
  const li_1 = document.createElement("li");
  li_1.innerHTML = "Albert";
  ul.appendChild(li_1);
  const li_2 = document.createElement("li");
  li_2.innerHTML = "Betty";
  ul.appendChild(li_2);
  const li_3 = document.createElement("li");
  li_3.innerHTML = "Charles";
  ul.appendChild(li_3);

  // add the list to the body
  const body = document.getElementById("body");
  body.appendChild(ul);
}

3. 修改 show 函式，以便它將列表新增到 HTML 頁面。以一種方式實現它，使列表的長度和內容可以隨著時間的推移而變化。

  <p>We offer many products:</p>
  <ul>
    <!-- The list of products may change -->
    <li>Ice creme</li>
    <li>Chocolate</li>
    <li>Coffee</li>
  </ul>

為了實現可變長度，你必須對提供的產品進行迴圈。將你的產品列表儲存在一個數組中，並對它進行迴圈。

點選檢視解決方案

function show() {
  "use strict";

  // start with a caption
  const p = document.createElement("p");
  p.innerHTML = "We offer many products:";
  const body = document.getElementById("body");
  body.appendChild(p);

  // define your products; in production, this may result from
  // a database query
  const productsArray = ["Ice creme", "Chocolate", "Coffe"];

  // start of the list
  const ul = document.createElement("ul");

  // loop over the list items
  for (let i = 0; i < productsArray.length; i++) {
    // create and add the items
    const li = document.createElement("li");
    li.innerHTML = productsArray[i];
    ul.appendChild(li);
  }

  // add the list to the body
  body.appendChild(ul);
}

4. 修改 show 函式，以便它將特定的影像新增到 HTML 頁面。

  <p></p>
  <img src="https://wikibook.tw/static/images/footer/wikimedia-button.png"/>

透過新增值為“300px”的 width 屬性來更改影像的大小。用唯一的識別符號（例如“newImage”）標記影像。

點選檢視解決方案

function show() {
  "use strict";

  // an empty paragraph
  const p = document.createElement("p");
  const body = document.getElementById("body");
  body.appendChild(p);

  const img = document.createElement("img");
  img.setAttribute("src", "https://wikibook.tw/static/images/footer/wikimedia-button.png");
  img.setAttribute("width", "300px");
  img.setAttribute("id", "newImage");
  // add the image to the body
  body.appendChild(img);
}

5. 擴充套件上一個示例。在將影像新增到頁面後，行為發生變化。第二次以及所有後續點選按鈕都會將影像的大小縮小 10% - 而不新增另一個按鈕。

點選檢視解決方案

function show() {
  "use strict";

  // try to locate the inserted image
  const oldImg = document.getElementById("newImage");

  if (oldImg) {
    // it exists, reduce its size
    const size = oldImg.width * 0.9;
    oldImg.setAttribute("width", size);

  } else {

    // it doesn't exist, create it
    const p = document.createElement("p");
    const body = document.getElementById("body");
    body.appendChild(p);

    const img = document.createElement("img");
    img.setAttribute("src", "https://wikibook.tw/static/images/footer/wikimedia-button.png");
    img.setAttribute("id", "newImage");
    img.setAttribute("width", "300px");
    // add the image to the body
    body.appendChild(img);
  }
}