设置 DOM 元素的文本 - Javascript

在Web开发时，经常需要通过Javascript来修改DOM元素的属性。这篇文章将介绍如何通过Javascript来设置DOM元素的文本内容。

1. 通过innerHTML属性设置文本

在Javascript中，可以通过innerHTML属性来设置一个DOM元素的HTML内容。这种方法非常简单，只需要在innerHTML属性中添加需要设置的文本即可。如下所示：

document.getElementById("demo").innerHTML = "Hello, World!";

在上面的代码中，通过getElementById方法获取了一个id为“demo”的元素，并通过innerHTML属性将其文本内容设置为“Hello, World!”。

2. 通过textContent或innerText属性设置文本

除了innerHTML属性以外，还可通过textContent或innerText属性设置DOM元素的文本内容。

textContent属性设置DOM元素的文本内容，无论该元素是否隐藏，都会修改其文本内容。而innerText属性只能用于可见元素，如果元素隐藏，则无法修改。

document.getElementById("demo").textContent = "Hello, World!";

在上面的代码中，通过getElementById方法获取了一个id为“demo”的元素，并通过textContent属性将其文本内容设置为“Hello, World!”。

document.getElementById("demo").innerText = "Hello, World!";

在上面的代码中，通过getElementById方法获取了一个id为“demo”的元素，并通过innerText属性将其文本内容设置为“Hello, World!”。

3. 通过createTextNode方法设置文本

除了上述的方法以外，还可以使用createTextNode方法来创建一个文本节点，并将它添加到DOM元素中。

var node = document.createTextNode("Hello, World!");
document.getElementById("demo").appendChild(node);

在上面的代码中，首先通过createTextNode方法创建了一个文本节点，并将其内容设置为“Hello, World!”。接着通过appendChild方法将这个文本节点添加到id为“demo”的元素中。

以上是通过Javascript设置DOM元素的文本的三种方法，它们各有优缺点，可以根据具体的需求来选择使用哪种方法。