如何创建带指定innerHTML的Div并存入变量？及双函数结果差异排查

1. 技术需求：创建带指定innerHTML的div并存储到变量 #

核心操作分三步：

• 调用document.createElement('div')生成div元素实例
• 给该元素的innerHTML属性赋值，填入目标HTML内容
• 将创建好的元素存入变量，后续可直接用于DOM操作

示例代码：

// 创建div并赋值给变量
const targetDiv = document.createElement('div');
// 设置自定义innerHTML内容
targetDiv.innerHTML = `
  <h3>自定义卡片标题</h3>
  <p>这是通过innerHTML插入的卡片内容</p>
`;
// 后续可直接使用变量，比如添加到页面
document.body.appendChild(targetDiv);

2. 问题排查：createBorderCardNode无console输出的原因 #

两个函数逻辑看似一致，但createBorderCardNode里的console.log(borderDiv)没输出，本质是函数执行到borderDiv.innerHTML赋值时抛出了错误，导致后续代码中断，常见诱因有两种：

诱因1：传入的border参数无效 #

如果state.borders中的元素是undefined、null，或者根本不是预期的国家数据对象，访问border.flags.svg、border.name.common这类属性时会直接触发报错，函数提前终止，console.log自然无法执行。

诱因2：border与country的数据结构不匹配 #

对比两个函数的模板字符串：

• createCountryCardNode使用country.flag、country.name等字段
• createBorderCardNode使用border.flags.svg、border.name.common等字段

如果border对象的结构和country不一致，比如：

• border没有flags.svg属性，或flags本身是undefined
• border.languages不是数组（比如是单个对象或undefined），访问border.languages[0].name会报错
• border.name不存在common子属性

这些情况都会导致模板字符串插值时抛出错误，函数停在innerHTML赋值步骤，console.log(borderDiv)永远不会运行。

验证与修复 #

先解开注释的console.log，检查border对象的属性是否存在：

console.log(border); // 查看完整的border对象结构
console.log(border.flags?.svg);
console.log(border.name?.common);
console.log(border.languages?.[0]?.name);

如果某一行输出undefined或报错，就是对应属性的问题。

修复时可用可选链操作符?.避免报错，保证函数正常执行：

borderDiv.innerHTML = `
<img class="country__img" src="${border.flags?.svg || ''}" />
<div class="country__data">
  <h3 class="country__name">${border.name?.common || '未知国家'}</h3>
  <h4 class="country__region">${border.region || '未知地区'}</h4>
  <p class="country__row"><span>👫</span>${border.population || 0}</p>
  <p class="country__row"><span>🗣️</span>${border.languages?.[0]?.name || '未知语言'}</p>
</div>
`;

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