# 章序号/节序号/节/笔记序号
- Objective：用JavaScript修改DOM（html文档）
- Breadcrumb: DOM - Element - 实例属性
# 概念阐释
## 语义
`innerHTML`是一个JavaScript属性，用于访问和更改HTML元素的**内容**。该属性允许读取或添加新的HTML标签，再通过标签对网页框架进行修改。
*因此需要注意的是，使用innerHTML属性来更改元素内容可以带来一定的安全风险，因为它允许用户输入的HTML代码在页面上执行。因此，在使用innerHTML操作元素内容时，应该尽可能的保证输入的内容安全性。*
## 语法
因为是对内容进行修改，通常跟在获取的后面，或者是修改变量时用。
```js
document.获取方法.innerHTML = "";
//还可以用逻辑运算符
```
#### 替换原来的元素
```js
document.body.innerHTML = '<h1>...</h1>';
```
#### 添加新的元素
```js
myDiv.innerHTML += '<h1>...</h1>';
```
# 举例子
1. 访问元素内容
```html
<div id="myDiv">This is my div.</div>
<script>
var myDiv = document.getElementById("myDiv");
var content = myDiv.innerHTML;
console.log(content); // 输出 "This is my div."
//也可以写成
document.getElementById('myDiv').innerHTML;
</script>
```
2. 修改元素内容，需要用到变量
```html
<div id="myDiv">This is my div.</div>
<script>
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "This is my new div.";
console.log(myDiv.innerHTML); // 输出 "This is my new div."
//也可以写成
document.getElementById("myDiv").innerHTML = "This is my new div.";
</script>
```
3. 添加新的HTML元素, 需要用到变量, 与[[js DOM 创建HTML标签creatElement]]的结果一样。
```html
<div id="myDiv">This is my div.</div>
<script>
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML += "<p>And this is a new paragraph.</p>";
console.log(myDiv.innerHTML); // 输出 "<div id="myDiv">This is my div.<p>And this is a new paragraph.</p></div>"
</script>
```
1. 点击改变页面内容
```html
<h1> 神秘信息</h1>
<p id='secret'> ******** </p>
<button onclick = 'show()'> 展示神秘信息</button>
<script>
const show = () => {
let secret = document.getElementById('secret');
secret.innerHTML="不告诉你😊";
}
</script>
```
在`innerHTML`内容中加入函数
```js
// 页脚修改
let date = new Date().getFullYear();
document.getElementsByClassName('site-footer')[0].innerHTML = `Copyright © ${date} Zhu Wanyu. All Rights Reserved.`;
// 使用IIFE 立即调用函数表达式
let copyright = document.getElementsByClassName('site-footer')[0];
if (copyright) {
// 使用 IIFE 立即设置内容
(function() {
let date = new Date().getFullYear();
copyright.innerHTML = `Copyright © ${date} Zhu Wanyuuuu. All Rights Reserved.`;
})();
}
```
# 类比、比较与对比
`.innerHTML`修改内容，[[js DOM 修改样式 style属性|.style]]修改样式
# 问题
- [练习题](https://www.codecademy.com/courses/build-interactive-websites/lessons/javascript-dom/exercises/tweak-element)
# 问题答案
新的`<h1>`会替换掉原`<h1>`的内容
```js
document.body.innerHTML = '<h1> this is the new content</h1>';
```
# 备注（经验集/错误集）
## summary
解决的怎么样？
## 参考资料
- [Element: innerHTML property](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)