JavaScript无法在div内创建标题元素的问题排查

核心问题 #

你代码里的关键错误是给h2元素设置value属性——h2属于普通HTML元素，不是输入类表单控件，根本没有value属性，自然无法显示内容。另外还有两个潜在问题需要修正：

具体修复步骤 #

• 替换value为textContent（推荐，更安全，不会解析HTML）或innerHTML
• 修正搜索框值的判断逻辑：输入框的value默认是空字符串""，而非null，应该判断是否为非空字符串
• 增加元素存在性校验，避免DOM获取失败导致后续代码报错

修正后的完整代码 #

// 获取DOM元素
const searchInput = document.getElementById('你的搜索框ID');
const renderContainer = document.getElementById('question-render');

// 校验元素是否存在，避免报错
if (!searchInput || !renderContainer) return;

// 判断搜索框内容非空（去除前后空格）
const searchValue = searchInput.value.trim();
if (searchValue) {
  // 创建h2元素
  const searchResult = document.createElement('h2');
  // 设置文本内容
  searchResult.textContent = `Search results for ${searchValue}`;
  // 添加到目标容器
  renderContainer.appendChild(searchResult);
}

额外说明 #

• 用trim()可以去除输入内容的前后空格，避免用户输入空白字符时也生成无效标题
• 如果需要支持HTML格式的内容（比如高亮搜索关键词），可以改用innerHTML，但要注意防范XSS风险，确保搜索内容是可信的

内容的提问来源于stack exchange，提问作者user22989935