允许 JavaScript改变HTML元素的内容

例如：<h1 id="header"style="widows">Old Header</h1>

Old Header是内容

Id是标签属性

style="widows"样式属性

一、HTML内容就是标签与标签的内容

（1）.改变 HTML 输出流

 1-1、JavaScript 能够创建动态的 HTML 内容：

例如：今天的日期是： Mon Jun 27 6:36:03 2019、

1-2、在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

1-3、提示：绝不要使用在文档加载之后使用 document.write()。//这会覆盖该文档。直接向网页输出内容

（2）、改变 HTML 内容

2-1、修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

2-2如需改变 HTML 元素的内容，请使用这个语法：document.getElementById(id).innerHTML = new HTML

document.getElementById(id)是根据HTML获取元素

innerHTML是后面你赋了什么值他会自动改变你的内容

（3）改变 HTML 属性

3-1如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value 属性名称

3-2、本例改变了 <img> 元素的 src 属性：document.getElementById("image").src = "../Content/Images/window对象.jpg" 图片链接

（4）创建新的 HTML 元素

4-1如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

var para = document.createElement("p");  创建标签

var node = document.createTextNode("This is new.");创建文本内容

para.appendChild(node);往<p>添加This is new.</p>

var element = document.getElementById("d1");获取《div》标签

element.appendChild(para);在上面的句子追加<p>This is new.</p>内容

（5）删除已有的 HTML 元素

如需删除 HTML 元素，您必须首先获得该元素的父元素：

var parent = document.getElementById("d1");

var child = document.getElementById("p1");

parent.removeChild(child);往《div》里面去除《p》标签

例子解释：

这个 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);

{

document.getElementById('p1').style.visibility = 'hidden';

}