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://wikibooks.cn/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://wikibooks.cn/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://wikibooks.cn/static/images/footer/wikimedia-button.png");
    img.setAttribute("id", "newImage");
    img.setAttribute("width", "300px");
    // add the image to the body
    body.appendChild(img);
  }
}