js 设置 div 内容

在JavaScript中设置<div>元素的内容，通常可以通过修改其innerHTML属性或者使用textContent属性来实现。以下是具体的方法和示例代码：

基础概念

• innerHTML: 这个属性允许你获取或设置元素的HTML内容。当你设置innerHTML时，浏览器会解析你提供的字符串，并创建相应的DOM元素。
• textContent: 这个属性用于获取或设置元素的文本内容，不包括HTML标签。它比innerHTML更快，因为它不会解析HTML。

优势

• 使用innerHTML可以在设置内容的同时插入HTML标签，适合需要渲染富文本的场景。
• textContent则更适合只需要纯文本且对性能有一定要求的场景。

类型

• 字符串类型，可以直接赋值给innerHTML或textContent。

应用场景

• 当你需要动态更新页面上的文本内容时。
• 在构建动态网页或单页应用（SPA）时，经常需要根据用户的交互或其他逻辑来更改页面的某些部分。

示例代码

// 获取div元素
var divElement = document.getElementById('myDiv');

// 使用innerHTML设置内容，可以包含HTML标签
divElement.innerHTML = '<p>这是一段<b>粗体</b>文本。</p>';

// 使用textContent设置纯文本内容
divElement.textContent = '这是一段纯文本。';

遇到的问题及解决方法

问题1: 设置内容后页面没有更新

• 原因: 可能是由于JavaScript代码执行时机不对，比如在DOM元素还未加载完成时就尝试修改它。
• 解决方法: 确保在DOM完全加载后再执行JavaScript代码，可以将代码放在window.onload事件中，或者使用DOMContentLoaded事件。

window.onload = function() {
    var divElement = document.getElementById('myDiv');
    divElement.innerHTML = '页面加载完成后设置的内容';
};

问题2: 设置innerHTML时出现XSS攻击

• 原因: 直接使用用户输入的数据设置innerHTML可能会导致跨站脚本攻击（XSS）。
• 解决方法: 对用户输入进行转义处理，或者使用更安全的方法如textContent（如果不需要HTML标签）。

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}

var userInput = '<img src=x onerror=alert("XSS")>';
divElement.innerHTML = escapeHtml(userInput);

通过上述方法，你可以安全且有效地在JavaScript中设置<div>元素的内容。