JavaScript - 修改HTML

上一頁
下一頁

使用 JavaScript 修改 HTML

HTML DOM 允許我們使用 JavaScript 來修改 HTML 元素。您可以使用各種方法和屬性來自定義或動態更新 HTML 元素。例如，您可以更改 HTML 元素的內容，從網頁中刪除或新增新的 HTML 元素，更改特定元素屬性的值等。

在 JavaScript 中，我們可以使用 id、屬性、標籤名、類名等訪問 HTML 元素。訪問元素後，我們可以使用 innerHTML、outerHTML 等屬性和 replaceWith()、appendChild() 等方法來更改和操作它們。

使用 innerHTML 屬性修改 HTML

HTML 屬性的 innerHTML 屬性用於替換元素的 HTML 內容或將新的 HTML 元素作為當前元素的子元素新增。

語法

請遵循以下語法使用 innerHTML 屬性來更改 HTML。

element.innerHTML = HTML_str;

在上述語法中，“element”是在 JavaScript 中訪問的 HTML 元素，而 HTML_str 是字串格式的 HTML。

示例

在下面的示例中，我們使用 innerHTML 屬性替換 div 元素的 HTML 內容。您可以點選按鈕來替換輸出中的 HTML 內容。

<html>
<body>
   <div id = "text">
      <p> One </p>
      <p> Two </p>
   </div>
   <button onclick = "changeHTML()"> Change HTML </button>
   <script>
      function changeHTML() {
         let text = document.getElementById('text');
         text.innerHTML = `<div> JavaScript </div> <div> HTML </div> <div> CSS </div>`;
   }
   </script>
</body>
</html>

使用 outerHTML 屬性修改 HTML

HTML 元素的 outerHTML 屬性替換元素的 HTML，包括標籤。

語法

請遵循以下語法使用 outerHTML 屬性。

element.outerHTML = HTML_str;

HTML_str 是字串格式的 HTML 內容。

示例

在下面的程式碼中，當用戶使用 outerHTML 屬性點選按鈕時，我們將 <div> 元素替換為 <img> 元素。

<html>
<body>
   <div id = "text">
      <p> Paragraph One </p>
      <p> Paragraph Two </p>
   </div>
   <p></p>
   <button onclick = "changeHTML()"> Change HTML </button>
   <script>
      function changeHTML() {
         let text = document.getElementById('text');
         text.outerHTML = `<img src="https://tutorialspoint.tw/static/images/logo.png?v3" alt="Logo">`;
      }
   </script>
</body>
</html>

使用 replaceWith() 方法替換 HTML 元素

replaceWIth() 方法將特定的 HTML 元素替換為新元素。

語法

請遵循以下語法使用 replaceWith() 方法來更改 HTML。

Old_lement.replaceChild(new_ele);

您需要將現有元素作為 replaceChild() 方法的參考，並將新元素作為引數傳遞。

示例

在下面的程式碼中，我們使用 createElement() 方法建立一個新的 <p> 元素。之後，我們將 HTML 新增到其中。

接下來，我們在 changeHTML() 函式中將 div 元素替換為新元素。

<html>
<body>
   <div id = "text">Hello World!</div>
   <button onclick = "changeHTML()"> Change HTML </button>
   <script>
      function changeHTML() {
         const text = document.getElementById('text');
         const textNode = document.createElement('p');
         textNode.innerHTML = "Welcome to the Tutorialspoint!";
         // Using the replaceWith() method
         text.replaceWith(textNode);
      }
   </script>
</body>
</html>

更改 HTML 元素屬性的值

您可以訪問 HTML 元素並在 JavaScript 中設定其值。

語法

請遵循以下語法更改 HTML 元素屬性的值。

element.attribute = new_value;

這裡，“attribute”是需要替換的 HTML 屬性。“new_value”是 HTML 屬性的新值。

示例

在下面的程式碼中，我們更改 <img> 元素的“src”屬性的值。當您點選按鈕時，它將更改影像。

<html>
<body>
   <img src = "https://tutorialspoint.tw/static/images/logo.png?v3" width = "300px" id = "logoImg" alt = "logo">
   <p></p>
   <button onclick="changeURL()"> Change URL of Image </button>
   <script>
      function changeURL() {
         document.getElementById('logoImg').src = "https://tutorialspoint.tw/static/images/simply-easy-learning.png";
      }
   </script>
</body>
</html>

向 HTML 元素新增新元素

您可以使用 appendChild() 方法向特定的 HTML 元素新增新的 HTML 子元素。

語法

請遵循以下語法使用 appendCHild() 方法新增新元素。

element.appendChild(new_ele);

你需要使用父元素作為 `appendChild()` 方法的引用，並將新元素作為引數傳遞。

示例

在下面的程式碼中，我們將 `

Apple

` 作為子元素新增到 `
` 元素中。

<html>
<body>
   <div id = "fruits">
      <p> Banana </p>
      <p> Watermelon </p>
   </div>
   <button onclick = "AddFruit()"> Add Apple </button>
   <script>
      function AddFruit() {
         const fruits = document.getElementById("fruits");
         const p = document.createElement("p");
         p.innerHTML = "Apple";
         fruits.appendChild(p); // Using the appendChild() method
      }
   </script>
</body>
</html>

從 HTML 元素中移除子元素

可以使用 `removeChild()` 方法從特定的 HTML 元素中移除子元素。

語法

請遵循以下語法使用 `removeChild()` 方法。

element.removeChild(child_ele)

當需要移除子元素時，你需要使用 HTML 元素作為 `removeChild()` 方法的引用，並將子元素作為引數傳遞。

示例

在下面的程式碼中，我們將 `

Apple

` 從 `
` 元素中移除。

<html>
<body>
   <div id = "fruits">
      <p> Banana </p>
      <p> Watermelon </p>
     <p> Apple </p>
   </div>
   <button onclick = "removeFruit()"> Remove Apple </button>
   <script>
      function removeFruit() {
        const fruits = document.getElementById("fruits");
        const apple = fruits.children[2];
        fruits.removeChild(apple);
      }
   </script>
</body>
</html>

使用 `document.write()` 方法

`document.write()` 方法會替換網頁的全部內容並寫入新的 HTML。

語法

請遵循以下語法使用 `document.write()` 方法。

document.write(HTML);

`document.write()` 方法接收以字串格式表示的 HTML 作為引數。

示例

在下面的程式碼中，我們使用 `document.write()` 方法替換了整個網頁的內容。

<html>
<body>
   <div id = "fruits">
      <p> Banana </p>
      <p> WaterMealon </p>
      <p> Apple </p>
   </div>
   <button onclick="replaceContent()"> Replace content </button>
   <script>
      function replaceContent() {
         document.write("Hello World");
      }
   </script>
</body>
</html>

為了更多練習，你可以嘗試更改 HTML 元素的第一個子元素、最後一個子元素以及其他屬性等。

列印頁面
上一頁
下一頁
廣告