创建两个 html 元素并将一个附加到另一个确实失败答案

【问题标题】：The creation of two html elements and appending one to the other does fail创建两个 html 元素并将一个附加到另一个确实失败
【发布时间】：2020-08-19 15:41:42
【问题描述】：

我即将编写一个函数来创建一个图像元素，该图像元素被它所创建的父链接元素包围......

function makeImage(source, link) {
  let hyperlink = document.createElement("a").setAttribute("href", link);
  let newImage = document.createElement("img");

  newImage.setAttribute("src", source);
  newImage = hyperlink.appendChild(newImage);

  return newImage;
}

创建“a”元素的过程出了点问题。每次调用makeImage 时都会抛出一个错误...

Uncaught TypeError: Cannot read property 'appendChild' of undefined

此错误与我的函数代码中的以下行有关...

newImage = hyperlink.appendChild(newImage);

感谢任何指向正确方向的提示。

【问题讨论】：

... .setAttribute("...", "...") 的返回值为undefined，因此hyperlink 确实具有后一个值，因此根本无法通过hyperlink 获得任何方法。将元素创建和属性分配拆分为两个单独的部分。

标签： javascript html dom element

【解决方案1】：

根据 MDN 文档MDN setAttribute，setAttribute 返回undefined。

所以我提出以下解决方案：

const hyperlink = document.createElement("a");
hyperlink.setAttribute("href", link);
...
newImage = hyperlink.appendChild(newImage);

【讨论】：

【解决方案2】：

在这里设置属性：

document.createElement("a").setAttribute("href", link)

Returns undefined，不是元素。试试：

function makeImage(source, link) {
    let hyperlink = document.createElement("a");
    hyperlink.setAttribute("href", link);
    let newImage = document.createElement("IMG");
    newImage.setAttribute("src", source);
    newImage = hyperlink.appendChild(newImage);
    return newImage;
}

【讨论】：

【解决方案3】：

感谢 S.LT 帮助我弄清楚发生了什么。下面是最终为我工作的代码。（其他答案未解决的其他问题。）

function makeImage(source, link) {
            let hyperlink = document.createElement("a");
            hyperlink.href = link;
            let newImage = document.createElement("IMG");
            newImage.setAttribute("src", source);
            hyperlink.appendChild(newImage);
            return hyperlink;
}

【讨论】：

原始发帖人 (OP) 不需要重复其他人已经在她/他自己的附加答案中几乎相同地提供的代码，特别是如果它没有贡献任何新发现。但是人们总是可以利用在每个答案下方粘贴 cmets 的机会。此外，任何不熟悉 SO 的人现在都可能熟悉如何正确提问以及如何以更易读的方式格式化代码。
从一个名为makeImage的函数中挑剔......我不希望得到一个超链接（一个a-element）作为返回值。