JavaScript Day13 - DOM(2) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 13

Modern Web

JavaScript 筆記 2 版系列第 13 篇

JavaScript Day13 - DOM(2)

13th鐵人賽 javascript

hokou

2021-09-28 21:41:42

783 瀏覽

分享至

新增元素

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 是比較好的作法