JavaScript - 更改 HTML

使用 JavaScript 更改 HTML

HTML DOM 允许我们使用 JavaScript 更改 HTML 元素。您可以使用各种方法和属性自定义或动态更新 HTML 元素。例如，您可以更改 HTML 元素的内容、删除或添加新的 HTML 元素到网页、更改特定元素的属性值等。

在 JavaScript 中，我们可以使用 id、attribute、tag name、class name 等来访问 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://www.qikepu.com/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 qikepu!";
	 	 	 	 	// 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://www.qikepu.com/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://www.qikepu.com/static/images/simply-easy-learning.png";
	 	 	 }
	 	</script>
</body>
</html>

向 HTML 元素添加新元素

您可以使用 appendChild（）方法将新的 HTML 子元素添加到特定的 HTML 元素中。

语法

按照下面的语法，使用 appendCHild（）方法添加新元素。

 element.appendChild(new_ele);

您需要将父元素用作 appendChild（）方法的引用，并将新元素作为参数传递。

例

在下面的代码中，我们将 <p> Apple <p> 附加为 <div> 元素的子元素。

<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（）方法的引用。

例

在下面的代码中，我们从 <div> 元素中删除了 <p> Apple <p>。

<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 元素的第一个子元素、最后一个子元素、其他属性等。

<< JavaScript - DOM 表单 JavaScript - 更改 CSS >>