向document.body追加<a>和<img>元素时丢失href与src属性问题

看起来你在动态构建包含图片和链接的文章结构时遇到了属性丢失的问题——别担心，这种情况通常是由几个常见原因导致的，咱们一步步排查解决：

1. 先检查变量赋值是否正确 #

你代码里的*link*、*some path*这些应该是占位符吧？如果实际代码里没有把它们替换成带引号的有效字符串，浏览器会无法识别这些属性值，最终导致属性被忽略。比如正确的写法应该是：

// 给链接赋值有效URL
linkElement.href = "https://your-target-url.com";
// 给图片赋值有效路径
imgElement.src = "/images/your-image.jpg";

如果是用变量赋值，确保变量本身是合法的字符串类型，比如：

const targetLink = "https://example.com";
linkElement.href = targetLink;

2. 排查内容安全策略（CSP）的限制 #

如果你的页面配置了内容安全策略，浏览器可能会出于安全考虑移除不符合规则的属性。打开浏览器控制台（F12）看看有没有CSP相关的警告信息——比如如果CSP的img-src规则不允许你设置的图片路径，或者script-src限制了动态DOM操作，都会导致属性被移除。

如果是CSP的问题，你需要调整页面的CSP配置，比如添加允许的资源源，或者在开发环境暂时放宽CSP规则来测试。

3. 构建完整DOM树后再挂载到body #

你目标的结构是article包含figure（里面是img）和div（里面是a），如果单独把img和a直接追加到body，不仅不符合你要的结构，还可能因为元素没有正确嵌套导致浏览器的DOM解析异常，进而丢失属性。正确的做法是先把所有元素嵌套好，再把整个article加到body：

// 1. 创建所有需要的容器元素
const article = document.createElement('article');
const figure = document.createElement('figure');
const div = document.createElement('div');

// 2. 构建图片部分
const imgElement = document.createElement('img');
imgElement.src = "your-image-path.jpg"; // 直接用属性赋值，比setAttribute更可靠
imgElement.width = 304;
figure.appendChild(imgElement);

// 3. 构建链接部分
const linkElement = document.createElement('a');
const linkText = document.createTextNode("点击这里");
linkElement.appendChild(linkText);
linkElement.href = "your-link-url.html";
div.appendChild(linkElement);

// 4. 把所有部分组装到article里
article.appendChild(figure);
article.appendChild(div);

// 5. 最后把完整的article加到body
document.body.appendChild(article);

4. 优先使用属性直接赋值，而非setAttribute #

对于src、href这类核心属性，直接通过元素的属性赋值（比如imgElement.src、linkElement.href）比使用setAttribute更可靠。因为浏览器会自动处理URL的解析和规范化，而setAttribute有时候会因为字符串格式问题（比如相对路径的处理）导致属性失效。

按照上面的步骤排查，应该就能解决属性被移除的问题啦！

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