iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

JavaScript 筆記 2 版系列 第 13

JavaScript Day13 - DOM(2)

新增元素

  • createElement():可以創造相關元素,如 div、ul、li
  • appendChild():將元素附加上去
  • 這次發現用 innerHTML 搭配變數也可以達到新增元素的效果,一起提供例子如下

初始的 HTML

<body>
    <div id="main">
    </div>
</body>

目標的 HTML

<body>
    <div id="main">
        <ul>
            <li><a href="#">連結</a></li>
            <li><span>測試</span></li>
        </ul>
    </div>
</body>

JS 的部分

使用 createElement()appendChild() 等方式

let main = document.querySelector("#main");

let ul_1 = document.createElement("ul");
let li_1 = document.createElement("li");
let li_2 = document.createElement("li");
let a_1 = document.createElement("a");
let span_1 = document.createElement("span");

main.appendChild(ul_1);
ul_1.appendChild(li_1);
ul_1.appendChild(li_2);

li_1.appendChild(a_1);
li_2.appendChild(span_1);

a_1.setAttribute("href", "#");
a_1.textContent = "連結";
span_1.textContent = "測試";

使用 innerHTML 加變數等方式

let main = document.querySelector("#main");

let link = "#";
let link_text = "連結";
let span_text = "測試";

main.innerHTML = `<ul><li><a href=${link}>${link_text}</a></li><li><span>${span_text}</span></li></ul>`;

感覺 innerHTML 的作法似乎比較快速,當然如果會重複的話,寫成 function 是比較好的作法

次回

預計說明 event(事件)


上一篇
JavaScript Day12 - DOM(1)
下一篇
JavaScript Day14 - event(1)
系列文
JavaScript 筆記 2 版31

尚未有邦友留言

立即登入留言