如何使用 p5.js 将文件输入放在 DOM 中的任何位置

Question

我正在使用 P5.js 库中的 createFileInput()。 更多信息 here。

function setup() {
  noCanvas();
  var fileInput = createFileInput(addedFile);
}

当我在 setup 函数中使用它时，它只是将元素添加到 HTML 页面的末尾。我无法弄清楚如何将输入放置在我页面中的任何位置，例如某些 span 标记之间。

我试过 .html()、.value()，甚至试过将它直接内嵌在 HTML 文件中，但我无法让它出现在我想要的位置。通常它会消失或者我收到错误消息。

我试过使用 this tutorial 并查看 js 来弄清楚他是如何将它放在页面中间的，但我什至找不到！

如有任何帮助，我们将不胜感激！

Answer 1

您的第一站应该是 the reference。

具体来说，parent() 函数看起来像您想要的那样：它采用您在 P5.js 代码中创建的元素（在您的例子中，您的 fileInput 变量）和将其移动到 HTML 网页中的父元素中。

因此您的第一步是创建一个 html 网页，在页面中间包含一个元素（可能是 <div>）。然后，您将编写 P5.js 代码来调用 parent() 函数并传入该 <div> 元素的 ID。