Javascript 简明教程
JavaScript - Changing HTML
Changing HTML with JavaScript
HTML DOM 允许我们使用 JavaScript 更改 HTML 元素。您可以使用各种方法和属性自定义或动态更新 HTML 元素。例如,您可以更改 HTML 元素的内容,从网页删除或向其中添加新的 HTML 元素,更改特定元素的属性值等。
在 JavaScript 中,我们可以使用 id、属性、标签名称、类名称等访问 HTML 元素。在访问元素之后,我们可以使用 innerHTML、outerHTML 等属性和 replaceWith()、appendChild() 等方法来更改和操作它们。
Changing HTML Using innerHTML Property
HTML 属性的 innerHTML 属性用于替换元素的 HTML 内容或将新的 HTML 元素作为当前元素的子元素添加。
Syntax
按照以下语法使用 innerHTML 属性更改 HTML。
element.innerHTML = HTML_str;
在以上语法中,“element” 是在 JavaScript 中访问的 HTML 元素,HTML_str 是字符串格式的 HTML。
Example
在下面的示例中,我们使用 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>
Changing HTML Using outerHTML Property
HTML 元素的 outerHTML 属性替换元素的 HTML,包括标签。
Example
在下面的代码中,我们使用 outerHTML 属性在用户单击按钮时用 <img> 元素替换 <div> 元素。
<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 元素。
Syntax
按照以下语法使用 replaceWith() 方法更改 HTML。
Old_lement.replaceChild(new_ele);
您需要将现有元素作为 replaceChild() 方法的引用,并将新元素作为参数传递。
Example
在下方的代码中,我们使用 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>
Changing Value of HTML Element’s Attribute
你可以在 JavaScript 中访问 HTML 元素并设置它的值。
Syntax
按照下面的语法修改 HTML 元素属性的值。
element.attribute = new_value;
这里,“attribute”是需要替换的 HTML 属性。“new_value”是 HTML 属性的新值。
Example
在下面的代码中,我们修改 <img> 元素的“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()"> 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 元素。
Syntax
按照下面的语法使用 appendChild() 方法添加新元素。
element.appendChild(new_ele);
你必须将父元素用作 appendChild() 方法的引用,并将新元素作为参数传递。
Example
在下面的代码中,我们附加 <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>
Removing a Child Element from the HTML Element
你可以使用 removeChild() 方法从特定 HTML 元素中删除子元素。
Syntax
按照下面的语法使用 removeChild() 方法。
element.removeChild(child_ele)
当你需要删除子元素时,你必须将 HTML 元素用作 removeChild() 方法的引用,并将子元素作为参数传递。
Example
在下面的代码中,我们从 <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>
Using the document.write() Method
document.write() 方法会替换整个网页内容,并写入新的 HTML。
Example
在下面的代码中,我们使用 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 元素的第一个子元素、最后一个子元素、其他属性等。