Javascript 简明教程
JavaScript - Changing HTML
Changing HTML with JavaScript
HTML DOM 允许我们使用 JavaScript 更改 HTML 元素。您可以使用各种方法和属性自定义或动态更新 HTML 元素。例如，您可以更改 HTML 元素的内容，从网页删除或向其中添加新的 HTML 元素，更改特定元素的属性值等。
The HTML DOM allows us to change the HTML elements with JavaScript. You can customize or dynamically update the HTML elements using the various methods and properties. For example, you can change the content of the HTML element, remove or add new HTML elements to the web page, change a particular element’s attribute’s value, etc.
在 JavaScript 中，我们可以使用 id、属性、标签名称、类名称等访问 HTML 元素。在访问元素之后，我们可以使用 innerHTML、outerHTML 等属性和 replaceWith()、appendChild() 等方法来更改和操作它们。
In JavaScript, we can access the HTML elements using id, attribute, tag name, class name, etc. After accessing the elements, we can change, manipulate them using the properties such as innerHTML, outerHTML, etc. and methods such as replaceWith(), appendChild() etc.
Changing HTML Using innerHTML Property
HTML 属性的 innerHTML 属性用于替换元素的 HTML 内容或将新的 HTML 元素作为当前元素的子元素添加。
The innerHTML property of the HTML property is used to replace the HTML content of the element or add new HTML elements as children of the current element.
Syntax
按照以下语法使用 innerHTML 属性更改 HTML。
Follow the syntax below to use the innerHTML property to change the HTML.
element.innerHTML = HTML_str;在以上语法中，“element” 是在 JavaScript 中访问的 HTML 元素，HTML_str 是字符串格式的 HTML。
In the above syntax, 'element' is an HTML element accessed in JavaScript, and HTML_str is an HTML in the string format.
Example
在下面的示例中，我们使用 innerHTML 属性替换 div 元素的 HTML 内容。您可以单击按钮替换输出中的 HTML 内容。
In the example below, we replace the HTML content of the div element using the innerHTML property. You can click the button to replace the HTML content in the output.
<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>Changing HTML Using outerHTML Property
HTML 元素的 outerHTML 属性替换元素的 HTML，包括标签。
The outerHTML property of the HTML element replaces the HTML of the element, including the tags.
Syntax
按照以下语法使用 outerHTML 属性。
Follow the syntax below to use the outerHTML property.
element.outerHTML = HTML_str;HTML_str 是字符串格式的 HTML 内容。
The HTML_str is an HTML content in the string format.
Example
在下面的代码中，我们使用 outerHTML 属性在用户单击按钮时用 <img> 元素替换 <div> 元素。
In the below code, we replace the <div> element with the <img> element when users click the button using the outerHTML property.
<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.tutorialspoint.com/static/images/logo.png?v3" alt="Logo">`;
}
</script>
</body>
</html>Replacing HTML Element Using replaceWith() Method
replaceWIth() 方法用新元素替换特定的 HTML 元素。
The replaceWIth() method replaces the particular HTML element with a new element.
Syntax
按照以下语法使用 replaceWith() 方法更改 HTML。
Follow the syntax below to use the replaceWith() method to change the HTML.
Old_lement.replaceChild(new_ele);您需要将现有元素作为 replaceChild() 方法的引用，并将新元素作为参数传递。
You need to take the existing element as a reference of the replaceChild() method and pass the new element as an argument.
Example
在下方的代码中，我们使用 createElement() 方法创建一个新 <p> 元素。然后，我们在其中添加 HTML。
In the below code, we used the createElement() method to create a new <p> element. After that, we added the HTML into that.
接下来，我们在 changeHTML() 函数中将 div 元素替换为新元素。
Next, we have replaced the div element with the new element in the changeHTML() function.
<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>Changing Value of HTML Element’s Attribute
你可以在 JavaScript 中访问 HTML 元素并设置它的值。
You can access the HTML element and set its value in JavaScript.
Syntax
按照下面的语法修改 HTML 元素属性的值。
Follow the syntax below to change the value of the HTML element’s attribute.
element.attribute = new_value;这里，“attribute”是需要替换的 HTML 属性。“new_value”是 HTML 属性的新值。
Here, 'attribute' is needed to replace the HTML attribute. The 'new_value' is a new value of the HTML attribute.
Example
在下面的代码中，我们修改 <img> 元素的“src”属性的值。点击按钮时，它会修改图片。
In the below code, we change the value of the 'src' attribute of the <img> element. When you click the button, it will change the image.
<html>
<body>
<img src = "https://www.tutorialspoint.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.tutorialspoint.com/static/images/simply-easy-learning.png";
}
</script>
</body>
</html>Adding a New Element to the HTML Element
你可以使用 appendChild() 方法将一个新的 HTML 子元素添加到特定 HTML 元素。
You can use the appendChild() method to add a new HTML child to the particular HTML element.
Syntax
按照下面的语法使用 appendChild() 方法添加新元素。
Follow the syntax below to add a new element using the appendCHild() method.
element.appendChild(new_ele);你必须将父元素用作 appendChild() 方法的引用，并将新元素作为参数传递。
You need to use the parent element as a reference of the appendChild() method and pass the new element as an argument.
Example
在下面的代码中，我们附加 <p> Apple<p> 作为 <div> 元素的子元素。
In the below code, we append the <p> Apple <p> as a child of the <div> element.
<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>Removing a Child Element from the HTML Element
你可以使用 removeChild() 方法从特定 HTML 元素中删除子元素。
You can use the removeChild() method to remove the child element from the particular HTML element.
Syntax
按照下面的语法使用 removeChild() 方法。
Follow the syntax below to use the removeChild() method.
element.removeChild(child_ele)当你需要删除子元素时，你必须将 HTML 元素用作 removeChild() 方法的引用，并将子元素作为参数传递。
You need to use the HTML element as a reference of the removeChild() method when you need to remove the child element and pass the child element as an argument.
Example
在下面的代码中，我们从 <div> 元素中删除 <p> Apple<p>。
In the below code, we remove the <p> Apple <p> from the <div> element.
<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>Using the document.write() Method
document.write() 方法会替换整个网页内容，并写入新的 HTML。
The document.write() method replaces the whole content of the web page and writes a new HTML.
Syntax
按照以下语法使用 document.write() 方法。
Follow the syntax below to use the document.write() method.
document.write(HTML);document.write() 方法将字符串格式的 HTML 作为参数。
The document.write() method takes an HTML in the string format as a parameter.
Example
在下面的代码中，我们使用 document.write() 方法替换整个网页的内容。
In the below code, we replace the content of the whole web page using the document.write() method.
<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 元素的第一个子元素、最后一个子元素、其他属性等。
For more practice, you may try to change the first child element, last child element, other attributes, etc. of the HTML elements.