JavaScript基础教程

JavaScript 对象

JavaScript 函数

JS HTML DOM

JS 浏览器BOM

AJAX 基础教程

JavaScript 参考手册

JS DOM 改变HTML内容

HTML DOM允许JavaScript获取和更改HTML元素的内容。

更改HTML内容

更改HTML元素内容的最简单方法是使用属性。

要更改HTML元素的内容，请使用以下语法：

element.innerHTML = text

以下示例使用id="para" 更改元素的内容：

<!DOCTYPE html>
<html>


<p id="para"></p>

<script>
document.getElementById("para").innerHTML = "Hello world";
</script>


</html>
测试看看

下面的示例获取id="para"的元素的内容：

<!DOCTYPE html>
<html>


<p id="para">This is a paragraph.</p>
<p id="result"></p>

<script>
var x = document.getElementById("para").innerHTML;
document.getElementById("result").innerHTML = x;
</script>


</html>
测试看看

改变输出流

方法将文本字符串写入文档流。

<!DOCTYPE html>
<html>
<p>document.write()方法将文本字符串写入文档输出流:</p>
<script>
document.write(new Date());
</script>
</html>
测试看看

此方法仅在解析该文档时将内容写入当前文档。

如果在页面加载后使用此方法，它将覆盖该文档中的所有现有内容。

<button onclick="myFunc()">Click me</button>

<script>
function myFunc() {
  document.write(new Date());
}
</script>
测试看看

更改属性的值

要更改HTML属性的值，请使用以下语法：

element.attribute = new value

下面的示例更改元素的属性的值：

单击按钮更改头像：

下面的示例获取锚元素的属性的值：

var x = document.getElementById("demo").href;
测试看看

向DOM添加新元素

您可以使用方法在HTML文档中显式创建新元素。

此方法创建一个新元素，但不会将其添加到DOM中。您必须在一个单独的步骤中执行此操作：

  // 创建一个新的h3元素
  var newElem = document.createElement("h3");
  // 并给它一些内容
  var newContent = document.createTextNode("嗨，大家好!");

方法将新元素添加到指定父节点的任何其他子节点的末尾。

// 将文本节点添加到新创建的h3
newElem.appendChild(newContent);  

// 将新创建的元素及其内容添加到DOM中
document.body.appendChild(newElem);
测试看看

但是，如果要在其他任何子项的开头添加新元素，则可以使用该方法。

//创建一个新的h3元素
var newElem = document.createElement("h3");
// 给它一些内容
var newContent = document.createTextNode("Hi there and greetings!");
// 将文本节点添加到新创建的h3
newElem.appendChild(newContent);  

// Get the Body
var body = document.body;
// Insert H3 before the first child of the BODY
body.insertBefore(newElem, body.childNodes[0]);
测试看看

从DOM中删除现有元素

同样，您可以使用该方法从DOM中删除子节点。

var div = document.getElementById("demo");
div.removeChild(div.firstElementChild);
测试看看
JS DOM 改变CSSJS HTML DOM选择器