通过代码动态创建元素时的对齐与排版顺序问题

你遇到的问题是元素添加顺序搞反了，再加上面几个细节没处理到位，调整代码如下：

修改后的完整代码 #

function setAttributes(el, attrs) {
    for(var key in attrs) {
        el.setAttribute(key, attrs[key]);
    }
}
          
const test = document.getElementById('test');
// 假设element是已定义的对象，这里模拟一个示例
const element = {
    icon_url: 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png',
    id: 'item-1',
    name: 'The current link item'
};

let a = document.createElement('a');
let img = document.createElement('img');

// 设置图片src
if (element['icon_url'] === null) {
    img.src = 'https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png';
} else {
    img.src = element['icon_url'];
}

// 给图片添加样式，对应目标结构的height和width
img.style.height = '30px';
img.style.width = '30px';

// 给a标签添加类
let classesToAdd = [
    'list-group-item', 
    'list-group-item-action',
    'd-flex',
    'justify-content-start',
    'align-items-center'
];
a.classList.add(...classesToAdd);

// 设置a标签的属性，加上border-radius样式
setAttributes(a, {
    'href': '#',
    'id': element['id'],
    'style': 'border-radius: 0;'
});

// 按顺序添加元素：图片 → 空格 → 文本
a.appendChild(img);
// 添加非换行空格（对应 ）
a.appendChild(document.createTextNode('\u00A0'));
// 添加文本节点，避免覆盖之前的内容
a.appendChild(document.createTextNode(element['name']));

test.appendChild(a);

<div id="test"></div>

关键修改点说明 #

• 调整元素顺序：先把图片添加到a标签，再添加空格和文本，确保排版是「图片 + 空格 + 文本」
• 替换textContent：不用a.textContent = ...（会清空a内已有内容），改用document.createTextNode创建文本节点再追加
• 补充样式：给图片加上目标结构里的宽高，给a标签加上border-radius: 0的样式
• 添加空格：用document.createTextNode('\u00A0')生成对应 的非换行空格，避免普通空格被压缩

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