更新 HTML 文本 - Javascript

在 Web 开发中，经常需要对 HTML 元素进行动态更新，使得其能够实现更加丰富的交互效果。本文将介绍如何使用 Javascript 更新 HTML 文本。

1. 获取元素

在进行 HTML 文本更新之前，首先需要获取到需要更新的元素。可以使用 document.getElementById() 函数获取具有唯一 ID 的元素，也可以使用 document.querySelector() 函数获取符合选择器的第一个元素。

// 通过 ID 获取元素
var element = document.getElementById('example');

// 通过选择器获取元素
var element = document.querySelector('.example');

2. 更新文本

一旦获取到元素，就可以使用 innerHTML 属性来更新元素的 HTML 内容。将需要更新的 HTML 内容赋值给 innerHTML 属性即可。

// 更新元素内部的 HTML 内容
element.innerHTML = '<p>新的 HTML 内容</p>';

值得注意的是，由于 innerHTML 属性会替换所有子元素，因此如果只是需要更新文本内容而不想影响子元素，则应该使用 textContent 属性。

// 更新元素内部的文本内容
element.textContent = '新的文本内容';

3. 避免安全问题

直接使用 innerHTML 属性来更新 HTML 内容存在安全风险，因为可以将恶意代码注入 HTML 内容中。为了避免这种情况，应该使用 DOM 操作来创建、添加和更新 HTML 节点。

// 创建并添加新的节点
var newNode = document.createElement('p');
newNode.textContent = '新的文本内容';
element.appendChild(newNode);

// 更新节点的文本内容
var oldNode = element.querySelector('p');
oldNode.textContent = '更新后的文本内容';

4. 总结

本文介绍了更新 HTML 文本的三种方式：使用 innerHTML 属性、使用 textContent 属性和使用 DOM 操作。在实际开发中，应根据具体情况选择合适的方式更新 HTML 内容，并注意避免安全问题。