如何在 JavaScript 中使用 appendChild答案

【问题标题】：how to use appendChild in javascript如何在 JavaScript 中使用 appendChild
【发布时间】：2021-05-24 23:53:55
【问题描述】：

我在前端的 js 脚本中获取上传图片的图片网址。

document.getElementById("url").value = result_url;
      var imgUrl = result_url;
      Node.appendChild(imgUrl);
      console.log(imgUrl)

它正在工作，但现在我试图将它附加到正文中，因此它显示用户上传的图像。这是正确的方法吗？ Node.appendChild 不起作用。我该如何解决这个问题？

【问题讨论】：

您希望文本中的图像 URL 以 img 元素的形式显示在正文中还是实际图像中？
@plalx 实际图像作为 img 元素 :)
请阅读How to Ask 并提供minimal reproducible example。使用问题编辑器的 stack sn-p 功能提供现场演示。 Node 是什么？这是在什么 HTML 上运行的？
如果这个问题是关于使用客户端 JS 进行 DOM 操作的，为什么它被标记为 node.js 和 ejs？
imgUrl 似乎是一个字符串变量，如果您正在为其设置元素的值。 Node.appendChild 也是接口。您需要在实现Node 的实际对象上调用appendChild，例如元素。

标签： javascript html ejs

【解决方案1】：

这是一个例子，我相信它是不言自明的。 appendChild 必须在节点实例上调用（例如 document.body）。此外，您必须创建一个实际的 img 元素，因为您不能将 String 添加为 Node。

const imgSrc = 'https://i.pinimg.com/originals/1c/cd/18/1ccd18916cc5e4a2840ea084ef9c36b1.jpg';

document.body.appendChild(newImg(imgSrc));

function newImg(src) {
  const img = document.createElement('img');
  img.src = src;
  return img;
}

【讨论】：