如何通过JavaScript DOM将img元素插入a标签内的文字左侧

完全可以通过JavaScript DOM实现，你当前的代码中图片显示在文字右侧，是因为你先给<a>标签设置了文本内容，再执行appendChild(img)，图片会默认追加到元素内容的末尾，所以显示在文字右边。

方案1：使用insertBefore调整插入位置 #

只需要修改一行代码即可，不需要调整原有代码的执行顺序：把a.appendChild(img);替换为a.insertBefore(img, a.firstChild);，该方法会直接把图片插入到<a>标签所有现有内容的最前面。
修改后的完整代码：

let a = document.createElement('a');
a.role = "menuitem";
a.tabIndex = "-1"; // 标准DOM属性为驼峰写法，小写tabindex浏览器也可兼容
a.href = "#";
a.onclick = function() {reloadPageWithChanges()};
a.innerHTML = stories["Chapter1"];
let img = document.createElement('img');
img.src = `pictures/cars/car1.png`;
img.style.marginRight = "3px";
img.style.marginLeft = "3px";
// 替换原appendChild逻辑，把图片插到最前面
a.insertBefore(img, a.firstChild);
document.body.appendChild(a);

方案2：调整内容添加顺序 #

先添加图片元素，再添加文本内容，逻辑更直观，避免后续插入新元素时还要调整位置：

let a = document.createElement('a');
a.role = "menuitem";
a.tabIndex = "-1";
a.href = "#";
a.onclick = function() {reloadPageWithChanges()};
// 先创建并插入图片
let img = document.createElement('img');
img.src = `pictures/cars/car1.png`;
img.style.marginRight = "3px";
img.style.marginLeft = "3px";
a.appendChild(img);
// 再添加文本，append方法不会覆盖已有元素
a.append(stories["Chapter1"]);
document.body.appendChild(a);

如果需要批量统一多个同类链接的排版，也可以给<a>元素添加统一类名，搭配CSS控制内部元素排列，两种方案都可以满足图片统一左对齐的需求。

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