HTML DOM 读取和改变HTML内容

改变HTML输出流
document.write();

   读取HTML内容：
      document.getElementById(id).innerHTML
      document.getElementById(id).outerHTML

那么，innerHTML和outerHTML的区别是什么呢？

innerHTML:从对象的起始位置到终止位置的全部内容,不包括Html标签。

outerHTML:除了包含innerHTML的全部内容外, 还包含对象标签本身。

改变HTML内容：

document.getElementById(id).innerHTML=new HTML
document.getElementById(id).jouterHTML=new HTML

innerText:

读取元素内的文本：document.getElementById(id).innerText
改变元素内的文本： document.getElementById(id).innerText=new text

document.write()

例：改变输出流

HTML代码：

<p>hello world</p>
<button onclick="output()">click</button>

JavaScript代码：

	function output(){
		document.write('hello');
	}

改变HTML内容：

1. document.getElementById(id).innerHTML=new text

HTML代码：

<p id="text">这是旧文本</p>

JavaScript代码：

document.getElementById('text').innerHTML='这是新文本！';

显示结果为：这是新文本！

改变HTML样式：

例如：改变p标签的样式：

HTML代码：

<p id="style">我是文本</p>

JavaScript代码：

	document.getElementById('style').style.color='blue';        //颜色为blue
	document.getElementById('style').style.fontWeight = 'bold'; //字体加粗
	document.getElementById('style').style.fontSize = '30px';   //字体大小为30像素

结果为：

创建新的 HTML 元素

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

已知div下已有子节点p1和p2

例：给div下创建第三个子节点p3

HTML代码：

	<div id="div1">
		<p id="p1">这是p1</p>
		<p id="p2">这是p2</p>
	</div>

JavaScript代码：

	var par = document.createElement('p');                          //创建一个节点<p></p>
	var node = document.createTextNode('我是p3,新创建的文本节点');    //向<p>中添加文本子节点
	par.appendChild(node);                                          //把文本节点添加到p节点
	var first = document.getElementById('div1');                    //获取div节点的ID
	first.appendChild(par);                                         //把p节点添加到div节点下

结果为：

下一篇：HTML DOM - 读取和修改节点对象属性

孙婷婷的博客

发布了42 篇原创文章 · 获赞 68 · 访问量 2万+

私信关注