如何在 HTML 页面中定位 JavaScript 生成的锚标记/元素？

Question

我有一个 js 脚本，它输出一个用于下载文件的 URL。 （这只是一个名为 data.js 脚本的文件的尾部）：

const blob = new Blob([csvContent], { type:'text/csv;charset=utf-8,' })
const objUrl = URL.createObjectURL(blob)
const link = document.createElement('a')
link.setAttribute('href', objUrl)
link.setAttribute('download', 'export.csv')
link.textContent = 'Export Data'

document.querySelector('body').append(link)

无论我把它放在哪里：

<div>
  <script type="text/javascript">src="data.js"></script>
</div>

它始终显示在页面顶部。 我缺少什么？我是 JS 新手，但我的搜索让我相信我需要创建一个自定义标签或元素。预先感谢。

我尝试过，但仍然没有成功：

<script>
  blob.innerHTML = `<a>$</a>${objUrl}`;
</script>

Answer 1

您试图直接操作 blob 对象，这是行不通的。

我想说，将您在 JavaScript 中创建的链接元素直接附加到 HTML 文档的所需部分，它将显示在您设置的 div 中。

const blob = new Blob([csvContent], { type:'text/csv;charset=utf-8,' });
const objUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.setAttribute('href', objUrl);
link.setAttribute('download', 'export.csv');
link.textContent = 'Export Data';

您想要附加链接的 HTML。

const targetElement = document.getElementById('download-link-container');

将链接附加到我们找到的元素。

targetElement.appendChild(link);

在 HTML 中，有一个带有 ID 的容器，您可以将其用作目标。

<div id="download-link-container">
  <!-- Your link will be injected in this -->
</div>

<!-- Script tag after the container -->
<script src="data.js"></script>