如何给div嵌入含JavaScript表达式的HTML？解决innerHTML显示[object]问题

你写的是JSX语法，但原生JavaScript的innerHTML属性不支持这种模板表达式，JS会把整个JSX结构当成对象处理，所以最终输出[object Object]。另外代码里的Link组件属于React生态写法，和原生DOM操作逻辑不兼容。

分两种场景处理：

场景1：原生JavaScript环境（无React） #

直接用原生JS遍历数组，通过拼接字符串或创建真实DOM元素实现：

方式1：拼接HTML字符串 #

const userInfo = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }];
const userList = document.getElementById('userlist');
// 遍历数组生成li的HTML片段
const listItems = userInfo.map(user => 
  `<li><a href="userpage?id=${user.id}">${user.name}</a></li>`
).join('');
// 组合成完整ul后赋值
userList.innerHTML = `<ul>${listItems}</ul>`;

注意：如果用户名包含<、>这类特殊字符，需要用encodeURIComponent转义，避免XSS风险。

方式2：创建真实DOM元素（更安全） #

const userInfo = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }];
const userList = document.getElementById('userlist');
const ul = document.createElement('ul');

userInfo.forEach(user => {
  const li = document.createElement('li');
  const a = document.createElement('a');
  a.href = `userpage?id=${user.id}`;
  a.textContent = user.name;
  li.appendChild(a);
  ul.appendChild(li);
});

// 清空原有内容后添加新列表
userList.innerHTML = '';
userList.appendChild(ul);

场景2：React环境（使用Link组件） #

React本身通过JSX渲染DOM，不要用innerHTML，直接在组件中渲染列表：

import { Link } from 'react-router-dom';

function UserList() {
  const userInfo = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }];
  
  return (
    <div id="userlist">
      <ul>
        {userInfo.map(user => (
          <li key={user.id}>
            <Link to={`userpage?id=${user.id}`}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

注意：React列表渲染必须给每个子元素添加唯一的key属性，这里用用户id即可。

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