在 JS 中加入文本 - Javascript

在前端开发中，我们常常需要在网页上动态地加入文本，在 JavaScript 中实现起来非常简单。

使用 innerHTML 属性

可以使用 element.innerHTML 属性为指定元素添加 HTML 内容。例如：

document.getElementById("my-element").innerHTML = "Hello, world!";

此代码将在 id 为 “my-element” 的元素中插入文本 “Hello, world!”。

使用 textContent 属性

如果您要插入纯文本（不是 HTML 代码），则可以使用 element.textContent 属性。例如：

document.getElementById("my-element").textContent = "Hello, world!";

此代码将在 id 为 “my-element” 的元素中插入文本 “Hello, world!”。

使用 createTextNode 方法

如果您需要在元素中插入动态文本，可以使用 document.createTextNode() 方法创建一个文本节点，然后使用 element.appendChild() 方法将其添加到元素中。例如：

var textNode = document.createTextNode("Hello, world!");
document.getElementById("my-element").appendChild(textNode);

此代码将在 id 为 “my-element” 的元素中插入文本 “Hello, world!”。

使用模板字符串

ES6 带来了一种方便的方法来构建动态字符串：模板字符串。它们可以包含变量，甚至支持多行文本。例如：

var name = "John";
var greeting = `Hello, ${name}!`;
document.getElementById("my-element").textContent = greeting;

此代码将在 id 为 “my-element” 的元素中插入文本 “Hello, John!”。

总结：在 JavaScript 中，您可以使用多种方法向元素添加动态文本，包括 innerHTML、textContent、createTextNode 和模板字符串。选择适合您用例的选项，并为您的网站或应用程序添加动态内容！