js如何修改html

1. 修改HTML的背景颜色

在JavaScript中，我们可以使用document.body.style.backgroundColor属性来修改HTML的背景颜色。例如：

<button onclick=document.body.style.backgroundColor = 'red'">变成红色</button>
<button onclick=document.body.style.backgroundColor = 'blue'">变成蓝色</button>

当我们点击第一个按钮时，HTML的背景颜色就会变成红色。而当我们点击第二个按钮时，HTML的背景颜色就会变成蓝色。

2. 向HTML中添加内容

2.1. 使用innerHTML属性

如果我们想要向HTML中添加新的内容，可以使用innerHTML属性。例如：

<button onclick=document.body[xss_clean] += '这是新添加的内容'">添加内容</button>

当我们点击这个按钮时，HTML中就会添加一段新的内容。

2.2. 使用appendChild方法

除了使用innerHTML属性，我们还可以使用appendChild方法。例如：

<button onclick=addContent()">添加内容</button>
<script>
function addContent() {
  var p = document.createElement("p");
  var text = document.createTextNode("这也是新添加的内容");
  p.appendChild(text);
  document.body.appendChild(p);
}
</script>

当我们点击这个按钮时，HTML中也会添加一段新的内容。

3. 修改HTML的样式

如果我们想要修改HTML元素的样式，可以使用style属性。例如：

<button onclick=document.getElementById('myDiv').style.backgroundColor = 'yellow'">改变背景颜色</button>
<div id="myDiv" style="background-color: pink; width: 100px; height: 100px;"></div>

当我们点击这个按钮时，myDiv元素的背景色就会变成黄色。

4. 修改HTML元素的属性

如果我们想要修改HTML元素的属性，可以使用setAttribute方法。例如：

<button onclick=document.getElementById('myImg').setAttribute('src', 'newImg.png')">改变图片</button>
<img id="myImg" src="oldImg.png" alt="旧的图片">

当我们点击这个按钮时，myImg元素的src属性就会变成newImg.png。

5. 将HTML元素移动到其他位置

如果我们想要将HTML元素移动到其他位置，可以使用appendChild方法。例如：

<button onclick=moveDiv()">将元素移动
<div id="myContainer">
  <div id="myDiv" style="background-color: pink; width: 100px; height: 100px;"></div>
</div>
<script>
function moveDiv() {
  var div = document.getElementById("myDiv");
  var container = document.getElementById("myContainer");
  container.appendChild(div);
}
[xss_clean]

当我们点击这个按钮时，myDiv元素就会被移动到myContainer元素内。

6. 删除HTML元素

如果我们想要删除HTML元素，可以使用removeChild方法。例如：

<button onclick=deleteDiv()">删除元素</button>
<div id="myContainer">
  <div id="myDiv" style="background-color: pink; width: 100px; height: 100px;"></div>
</div>
<script>
function deleteDiv() {
  var div = document.getElementById("myDiv");
  var container = document.getElementById("myContainer");
  container.removeChild(div);
}
</script>

当我们点击这个按钮时，myDiv元素就会被从myContainer元素内删除。