Javascript 创建两个html元素并将一个添加到另一个元素失败

我将要编写一个函数，创建一个图像元素，该元素由其创建良好的父链接元素包围

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);

---

任何指向正确方向的提示都值得赞赏。

根据MDN文档，setAttribute return

未定义

因此，我提出以下解决方案：

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

在此设置属性：

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

，而不是元素。尝试：

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;
}

---

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

---

的返回值。setAttribute（“…”，“…”）

是

未定义的

，因此

超链接

具有后一个值，因此通过

超链接

根本没有可用的方法。将元素创建和属性分配分为两个独立的部分。原始海报（OP）不需要重复其他人在其额外答案中提供的几乎相同的代码，特别是如果它没有任何新发现。但人们总是可以利用在每个答案下面粘贴评论的机会。此外，任何对SO不熟悉的人现在都可能熟悉如何正确提问以及如何以更好的可读性格式化代码。挑剔。。。从名为

makeImage

的函数中，我不希望得到超链接（一个

a

-元素）作为返回值。

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;
}