createElement 寫法

先來說一下 .innerHTML 與 .createElement 的差異

.innerHTML與.createElement的差異

🎃 用.innerHTML來操控 html

🍋 步驟一：先組好「整個字串」

例如：

str = '<li>卡斯伯</li><li>查理</li>';

🍋 步驟二：再讓瀏覽器自己去編譯出「<li></li>和裡面的文字內容」

el.innerHTML = str;

‼️ .innerHTML的特性：

會先把「原本的資料全部清除」之後，再帶入「新的資料」

🎃 用.createElement來操控 html

🍋 步驟一：先在 JavaScript 生成一個「<li></li>元素」

🍋 步驟二：在這個「<li></li>元素」上，我可以做各種事情（例如：加入文字內容、改變文字顏色）

🍋 步驟三：最終再來決定，我要把這個「<li></li>元素」塞在哪個「節點」上，例如：我要把「<li></li>元素」用.appendChild塞在<ul></ul>裡面

‼️ .appendChild的特性：

用「.appendChild動態新增子節點」到節點上，會在「原本的資料“後面”」去做新增

✅ 「原本的資料」全部都會保留著

範例

html:

<h1 class="title"></h1>

現在，我要做的是：在<h1></h1>裡面，塞入一個「<em></em>」

作法如下

步驟一：用.createElement新增 DOM 元素（新增 html 標籤）

🎃 document代表：我要在「這個網頁的document」新增一個元素

🎃 用.createElement新增一個「<em></em>」元素

var str = document.createElement('em');

步驟二：在元素上新增內容

🎃 用.textContent賦予「值」給str

🎃 先在 css 寫好樣式：

.orange{
    color: orange;
}

🎃 再用.setAttribute新增一個 className 叫做「orange」給str

var str = document.createElement('em');

str.textContent = 'hello';
str.setAttribute('class', 'orange');

步驟三：要掛在哪個節點上

‼️ 元素新增出來之後，還不會出現在網頁上，原因為：我並沒有指定「元素要掛在哪個節點上」

這個新增的<em></em>，要掛在哪個節點上呢？

–> 要掛在<h1></h1>這個節點上

🎃 用.querySelector選擇.title

🎃 .appendChild代表：我要在.title裡面，動態增加一個「子節點」

🍋 要增加的「子節點」，就是我在上面產生出來的 DOM 元素str

JS:

var str = document.createElement('em');

str.textContent = 'hello';
str.setAttribute('class', 'orange');

// 增加子節點
document.querySelector('.title').appendChild(str);

😄 可以看到，<em></em>就掛在<h1></h1>這個節點上了

.appendChild「不會」把原本的資料清除

如果在<h1></h1>裡面，原本就已經有內容了（<em>1234</em>）

html:

<h1 class="title">
    <em>1234</em>
</h1>

JS:

var str = document.createElement('em');

str.textContent = 'hello';
str.setAttribute('class', 'orange');

// 增加子節點
document.querySelector('.title').appendChild(str);

用「.appendChild動態新增子節點」到<h1></h1>上，會在「原本的資料“後面”」去做新增

‼️ 「原本的資料<em>1234</em>」還是會保留著