Element.innerHtml 教程
最后修改于 2023 年 8 月 24 日
Element.innerHtml 教程演示了如何在 JavaScript 中使用 Element.innerHtml 属性读写 HTML 内容。
Element.innerHtml
Element.innerHtml 读取或写入元素内的 HTML 标记。
要将 HTML 插入文档而不是替换元素的内容，我们使用 insertAdjacentHTML 方法。
Document.all 示例
以下示例演示了文档 all 属性的用法。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Element.innerHtml</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<input id="input" type="text">
<div id="output"></div>
<button id="writeBtn">Write</button>
<button id="readBtn">Read</button>
<script src="main.js"></script>
</div>
</body>
</html>
在文档中，我们有一个 input 元素和两个按钮。按钮用于读写 div 元素的 HTML 内容。
main.css
.container {
display: flex;
}
#output {
width: 18em;
height: 2em;
border: 1px solid lightblue;
overflow: hidden;
}
* {
margin: 15px 5px;
}
这是我们文档的一些基本样式。
main.js
const input = document.getElementById('input');
const output = document.getElementById('output');
const writeBtn = document.getElementById('writeBtn');
const readBtn = document.getElementById('readBtn');
writeBtn.addEventListener('click', () => {
let val = input.value;
output.innerHTML = val;
});
readBtn.addEventListener('click', () => {
let content = output.innerHTML;
console.log(content);
});
我们向按钮添加点击事件监听器。
let val = input.value;
我们从 input 中读取输入的数值。
output.innerHTML = val;
我们使用 innerHTML 属性将输入的数值复制到 output 元素中。
readBtn.addEventListener('click', () => {
let content = output.innerHTML;
console.log(content);
});
这里我们将 output 的 HTML 内容读取并写入控制台。
在这篇文章中，我们使用了元素的 innerHTML 属性。