{ PH_Dev }

Published on

透過 JavaScript 動態建立 HTML 元素的幾種方式

Authors
  • avatar
    Name
    Penghua Chen(PH)
    Twitter

透過 JavaScript 動態建立 HTML 元素的幾種方式

今天要來學習的是如何透過JS在網頁上建立一個 HTML 的元素。

如何使用 Document.createElement() 以及 Element.innierHTML 兩種方式達成目的

事不宜遲，趕緊往下看吧!

Document.createElement() 用途

可以在 HTML 中透過 Document.createElement() 這個方法指定要在哪個 HTML 元素底下建立另一個 HTML 元素。

如何使用 Document.createElement()

關於怎麼使用，就直接看看測試的例子吧！

  • 測試例子一: 在 <ul> 元素底下新增 <li> 元素
<ul class="list"></ul>

const list = document.querySelector('.list');

for (let i = 1; i <= 5; i++) {
  const li = document.createElement('LI');
  li.textContent = `這是第${i}個 LI 元素`;
  list.appendChild(li);
}

透過 textContent 將文字內容新增到 <li> 元素中

==而 appendChild() 用於將一個節點新增到指定父節點的子節點中==

執行後可以得到5個在 <ul> 裡面新建立的 <li> 元素

Day21-2

  • 測試例子二: 在 div 元素底下新增 <p> 、 <a> 元素
<div class="container"></div>

const container = document.querySelector('.container');
const paragraph = document.createElement('P');
const link = document.createElement('A');

paragraph.textContent = 'Lorem ipsum dolor sit amet.';
paragraph.setAttribute('class', 'text');
container.appendChild(paragraph);

link.textContent = 'This is a link';
link.setAttribute('class', 'link');
link.setAttribute('href', '#');
container.appendChild(link);

這裡在 div 底下新增了 <p> 、 <a> 兩個元素

並透過 setAttribute() 在這兩個元素上新增屬性，如下圖:

Day21-1

Element.innerHTML 用途

透過字串的格式，將自定義的 HTML 格式渲染在 HTML 頁面上。

但這個作法會讓原本 HTML 上的元素都被刪除並以自定義的格式取代。

如何使用 Element.innerHTML

關於怎麼使用，就直接看看測試的例子吧！

  • 測試例子一: 在 <ul> 元素底下新增 <li> 元素
<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

const list = document.querySelector('.list');
let content = '';

for (let i = 1; i <= 5; i++) {
  const domString = `<li>這是第${i}個 LI 元素</li>`;
  content += domString;
}
list.innerHTML = content;

從程式碼中可以知道原本 <ul> 裡面有三個 <li> 元素，但建立了5個 <li> 元素並使用 Element.innierHTML 渲染到頁面上後，可以看到原本的會被新建立的取代。

Day21-2