web前端学习

概述

在JavaScript中，innerHTML属性对于获取和修改HTML元素的内容很有用。通过innerHTML属性获取HTML元素内容： 元素名称.innerHTML 通过innerHTML属性修改HTML元素内容： 元素名称.innerHTML = 字符串;

1.获取HTML内容

	
<p id="content_test">
	abc<span>这是文本内容</span>
</p>

abc这是文本内容

	
//从起始位置到终止位置的内容, 但它去除Html标签 。
console.info(document.getElementById("content_test").innerHTML);
//除了包含innerHTML的全部内容外, 还包含对象标签本身。
console.info(document.getElementById("content_test").outerHTML);
//从起始位置到终止位置的内容, 但它去除Html标签 
console.info(document.getElementById("content_test").innerText);
//获取(不包括标签)对象的文本 
console.info(document.getElementById("content_test").outerText);
//textContent 属性设置或返回指定节点的文本内容，以及它的所有后代
console.info(document.getElementById("content_test").textContent);

2.修改HTML内容

	
<p id="content_test2">
	abc<span>这是文本内容</span>
</p>

abc这是文本内容

	
document.getElementById("content_test2").innerHTML = "这是<strong>修改后</strong>的文本";
document.getElementById("change_btn").innerHTML = "还原元素内容";