如何在模态中显示 HTML 本地存储链接？

Question

我有一个在模式中显示 API 图像的模式，我希望在模式中显示“添加到收藏夹”链接。 到目前为止，我可以使用 result.title 等显示“标题”、“说明”和“日期”。 但是，当我使用 result.saveText 显示“添加到收藏夹”时，HTML 链接显示未定义。 如何在模态框内将“添加到收藏夹”作为 HTML 链接显示？

// Image
const image = document.createElement("img");
image.src = result.url;
image.alt = result.title + "<br>" + result.explanation + "<br>" + result.date;
image.loading = "lazy";
image.classList.add("card-img-top");

// Card Title
const cardTitle = document.createElement("h5");
cardTitle.classList.add("card-title");
cardTitle.textContent = result.title;

// Save Text
const saveText = document.createElement("p");
saveText.classList.add("clickable");
if (page === "results") {
  saveText.textContent = "Add To Favorites";
  saveText.setAttribute("onclick", `saveFavorite('${result.url}')`);
} else {
  saveText.textContent = "Remove Favorite";
  saveText.setAttribute("onclick", `removeFavorite('${result.url}')`);
}

Answer 1

您的代码显示没有任何问题（除了没有将其附加到父元素或 document.body）

我检查了您的模型，发现 saveText 没有附加到任何父元素或任何 document.body。您的代码元素甚至没有p 标签。

您可能应该使用append 方法将其附加到父元素或子元素。在您的情况下，您可能应该使用cardTitle.appendChild(SaveText)

整个body 中甚至都没有p 标签：

document.querySelectorAll('img')[1].onerror = function(){
let div = document.createElement('div')
div.textContent = 'Link is invalid.'
document.body.appendChild(div)
}

<img src="invalid.jpg" alt ="<a href='https://www.w3schools.com'>Visit W3Schools.com!</a>">
<img src="invalid.jpg" >