如何将变量从 js 传递到 html 节点 - Javascript

在前端开发中，我们经常需要将 Javascript 中的变量传递到 HTML 页面中的节点。这种交互方式可以让我们动态地更新页面内容，实现良好的用户交互体验。

以下是将变量传递到 HTML 节点的几种常见方法：

1. 使用 innerHTML 属性

innerHTML 属性可以用来获取或设置某个HTML元素的内容。通过设置这个属性，我们可以将变量中存储的数据插入到 HTML 页面中的指定元素中。下面是一个简单的例子：

let myVariable = "Hello World!";
document.getElementById("myElement").innerHTML = myVariable;

这段代码会将 "Hello World!" 文本插入到页面中的 id 为 "myElement" 的元素中。

2. 使用 textContent 或 innerText 属性

除了使用 innerHTML 属性，我们还可以使用 textContent 或 innerText 属性。这两个属性可以用来获取或设置某个元素中的文本内容。

如果我们只需要插入纯文本数据，不需要处理 HTML 标签，那么使用 textContent 或 innerText 属性更加安全。这是因为 innerHTML 属性的设置可能会引入一些潜在的安全问题。

let myVariable = "Hello World!";
document.getElementById("myElement").textContent = myVariable;

这段代码会将 "Hello World!" 文本插入到页面中的 id 为 "myElement" 的元素中。

3. 使用创建新元素的方法

有时候，我们需要在 HTML 页面中创建新的元素。这种情况下，我们可以使用 createElement() 方法来创建新元素，然后使用 innerHTML 或 textContent 属性来设置元素的内容。

let myVariable = "Hello World!";
let newElement = document.createElement("p");
newElement.innerHTML = myVariable;
document.body.appendChild(newElement);

这段代码会创建一个新的段落元素，并将 "Hello World!" 文本插入到这个元素中。最后，将这个元素添加到页面的 元素中。

4. 使用模板字符串

ES6 引入的模板字符串提供了一种简单的方法，可以将变量插入到字符串中。这样做就可以直接用 innerHTML 或 textContent 将带有变量的字符串插入到 HTML 中。

let myVariable = "World";
let greeting = `Hello ${myVariable}!`;
document.getElementById("myElement").innerHTML = greeting;

这段代码会将 "Hello World!" 文本插入到页面中的 id 为 "myElement" 的元素中。

以上是将变量从 Javascript 传递到 HTML 节点的几种常见方法。根据实际需求选择合适的方法，可以让我们更加方便地实现页面功能。