JavaScript 更改 HTML

HTML DOM 允许我们使用 JavaScript 来更改 HTML 元素。你可以利用各种方法和属性来定制或动态地更新 HTML 元素。例如，你可以更改 HTML 元素的内容，在网页上移除或添加新的 HTML 元素，更改某个特定元素的属性值等等。

在 JavaScript 中，我们可以使用 id、属性、标签名、类名等来访问 HTML 元素。访问这些元素后，我们可以使用 innerHTML、outerHTML 等属性以及 replaceWith()、appendChild() 等方法来修改它们。

使用 innerHTML 属性更改 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()">更改 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

outerHTML 属性用于替换元素的 HTML，包括标签本身。

语法

使用 outerHTML 属性的语法如下：

element.outerHTML = HTML_str;

这里的 HTML_str 是字符串格式的 HTML 内容。

示例

在下面的代码中，当用户点击按钮时，我们使用 outerHTML 属性将

元素替换为元素。

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

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

replaceWith() 方法用于用新元素替换某个特定的 HTML 元素。

语法

使用 replaceWith() 方法更改 HTML 的语法如下：

Old_element.replaceWith(new_ele);

你需要将现有元素作为 replaceWith() 方法的参考，并将新元素作为参数传递。

示例

在下面的代码中，我们在 changeHTML() 函数中使用了 createElement() 方法创建了一个新的

元素，然后将 HTML 添加到其中。

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

更改 HTML 元素属性的值

你可以访问 HTML 元素并在 JavaScript 中设置其值。

语法

更改 HTML 元素属性值的语法如下：

element.attribute = new_value;

这里的 'attribute' 是需要替换的 HTML 属性，而 'new_value' 是 HTML 属性的新值。

示例

在下面的代码中，我们更改了元素的 'src' 属性的值。当你点击按钮时，它会更换图片。

<html>
<body>
   <img src="https://www.tutorialspoint.com/static/images/logo.png?v3" width="300px" id="logoImg" alt="logo">
   <p></p>
   <button onclick="changeURL()">更改图片 URL</button>
   <script>
      function changeURL() {
         document.getElementById('logoImg').src = "https://www.tutorialspoint.com/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()">添加 Apple </button>
   <script>
      function AddFruit() {
         const fruits = document.getElementById("fruits");
         const p = document.createElement("p");
         p.innerHTML = "Apple";
         fruits.appendChild(p); // 使用 appendChild() 方法
      }
   </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()">移除 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> Watermelon </p>
      <p> Apple </p>
   </div>
   <button onclick="replaceContent()">替换内容</button>
   <script>
      function replaceContent() {
         document.write("Hello World");
      }
   </script>
</body>
</html>

为了进行更多的练习，你可以尝试更改 HTML 元素的第一个子元素、最后一个子元素、其他属性等等。