㈠HTML DOM - Modify
Modify HTML = change elements, attributes, styles and events.
① create HTML content
The easiest way to change the element content is to use the innerHTML property.
The following example of an HTML content change <p> element:
</body>
</html>
Renderings:
② change HTML styles
Through the HTML DOM, the object can be accessed style HTML elements.
The following example of a change of paragraph style HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="skyblue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>
Renderings :
③ create a new HTML elements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
效果图：
㈡HTML DOM - 修改 HTML 内容
通过 HTML DOM，JavaScript 能够访问 HTML 文档中的每个元素。
⑴改变 HTML 内容
改变元素内容的最简单的方法是使用 innerHTML 属性。
下面的例子更改 <p> 元素的 HTML 内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>段落通过脚本来修改内容。</p>
</body>
</html>
效果图：
⑵使用事件
HTML DOM 允许您在事件发生时执行代码。
当 HTML 元素"有事情发生"时，浏览器就会生成事件：
▪ 在元素上点击
▪ 加载页面
▪ 改变输入字段
★下面两个例子在按钮被点击时改变 <body> 元素的背景色：
示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button"
onclick="document.body.style.backgroundColor='lavender';"
value="修改背景颜色">
</body>
</html>
效果图：
示例2：在本例中，由函数执行相同的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" value="修改背景颜色" />
</body>
</html>
效果图：
★示例：下面的例子在按钮被点击时改变 <p> 元素的文本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="Hello Runoob!";
}
</script>
<input type="button" onclick="ChangeText()" value="修改文本" />
</body>
</html>
效果图：
由： 
变：
㈢HTML DOM - 元素
添加、删除和替换 HTML 元素。
⑴创建新的 HTML 元素 - createElement()
如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
效果图：
上面的实例解析：
▪ 这段代码创建了一个新的 <p> 元素：
▪ 如需向 <p> 元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：
▪ 然后您必须向 <p> 元素追加文本节点：
▪ 最后，您必须向已有元素追加这个新元素。
这段代码查找到一个已有的元素：
▪ 这段代码向这个已存在的元素追加新元素：
⑵创建新的 HTML 元素 - insertBefore()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>
</body>
</html>
效果图：
⑶删除已有的 HTML 元素
示例：如需删除 HTML 元素，必须清楚该元素的父元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
</html>
效果图：
上面实例解析：
▪ 这个 HTML 文档包含一个带有两个子节点（两个 <p> 元素）的 <div> 元素：
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
▪ 查找 id="div1" 的元素：
var parent=document.getElementById("div1");
▪ 查找 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
▪ 从父元素中删除子元素：
parent.removeChild(child);
▪ 这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：
var child=document.getElementById("p1"); child.parentNode.removeChild(child);
⑷替换 HTML 元素
示例：需替换 HTML DOM 中的元素，使用 replaceChild() 方法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); var para=document.createElement("p"); var node=document.createTextNode("这是一个新的段落。"); para.appendChild(node); parent.replaceChild(para,child); </script> </body> </html>
效果图：
