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