时间戳

首页 > 解决方案 > 如何从外部 js 文件呈现 html

javascript - 如何从外部 js 文件呈现 html

问题描述

这可能是一个愚蠢的问题，但我实际上从未这样做过，而且我正在尝试的方法不起作用。

我有 2 个文件

test.html
test.js

我在 test.html 中将 js 作为外部链接

<!doctype html>
<html>
<head>
<script type="text/javascript" src="test.js"></script>

<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

在我的 js 文件中，我有这样的东西

document.appendChild('<div>testing</div>')

我也试过

document.getElementsByTagName('body').appendChild('<div>testing</div>')

我做错了什么？我只想学习如何为我正在从事的未来项目从外部 js 文件生成 html。

标签： javascript

解决方案

您通常应该尝试在文档解析之后而不是之前运行依赖于页面的脚本 - 如果您将脚本放入<head>并立即运行它，则<body>尚未创建。为您的脚本标签defer赋予属性，使其仅在文档完全解析后运行：

<script defer type="text/javascript" src="test.js"></script>

  • appendChild接受一个元素作为参数，而不是字符串

  • 您需要附加到body，而不是document本身 ( Only one element on document allowed.)

  • 如果要附加 HTML 字符串，请分配/连接到.innerHTML属性

  • 分配给.innerHTML将破坏对内部元素的现有引用，包括侦听器。为了让听众保持活跃，请insertAdjacentHTML改用：

document.body.appendChild(document.createElement('div'))
  .textContent = 'testing1';
  
// Another method:

document.body.innerHTML += '<div>testing2</div>';

// Another method:

document.body.insertAdjacentHTML('beforeend', '<div>testing3</div>');

推荐阅读