创建两个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文档MDN setAttribute，setAttribute返回undefined。

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

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

,

setAttribute在这里：

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

,

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