###### tags: `HTML助教作業`
# 第五週作業

這禮拜會教比較多的東西，也都是JavaScript，要讓同學熟悉DOM的基本操作。

簡報有講到如何將create出來的元素設定文字和屬性的方法，但那些都是很久以前的做法了，稍微帶過就好，教同學們較常用的方法就好，可以看範例1。

***學習重點***
- 學習createElement用法(常用)
- 學習appendChild、insertBefore、removeChild用法
- 學習如何使用JavaScript幫元素動態新增CSS

***重點語法***
- document.createElement
- appendChild
- insertBefore
- removeChild
- element.style

***範例1***

***index.html***

<button id="generateImage">Click</button>
<div class="imageBox"></div>

***index.js***

const btn = document.querySelector("#generateImage");
const box = document.querySelector(".box");
btn.addEventListener("click", () => {
    //不需要再利用createAttribute把屬性名稱創建出來後，setAttributeNode附加到標籤上
    //直接利用.的方式賦予標籤屬性並設定值就好
    //如果是設定文字的話用textContent就好
    const img = document.createElement("img");
    img.width = 100;
    img.height = 100;
    img.src = "image.jpg";
    box.appendChild(img);
});

***作業要求***
共有五個按鈕，第一個按鈕按下以後會一次產生5張圖片，第二個按鈕按下以後會往原本的ul後面多新增一個li並帶上編號，第三個按鈕按下以後會跳出prompt視窗詢問要插入文字在哪個位置(編號)前面，第四個按鈕按下會跳出prompt視窗詢問要移除哪個位置(編號)的文字，最後一個按鈕按下以後所有的文字顏色都會更改。

<iframe src="https://codesandbox.io/embed/diwucizuoye-9wi4y?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="第五次作業"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>