首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何从外部js文件呈现html

如何从外部js文件呈现html
EN

Stack Overflow用户
提问于 2018-06-22 07:32:13
回答 1查看 2K关注 0票数 1

这可能是一个愚蠢的问题,但我实际上从来没有这样做过,我正在尝试的是不起作用的。

我有两个文件

代码语言:javascript
复制
test.html
test.js

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

代码语言:javascript
复制
<!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文件中,我有类似这样的东西

代码语言:javascript
复制
document.appendChild('<div>testing</div>')

我也试过了

代码语言:javascript
复制
document.getElementsByTagName('body').appendChild('<div>testing</div>')

我做错了什么?我只想学习如何从一个外部的js文件中为我正在工作的未来项目生成html。

EN

回答 1

Stack Overflow用户

发布于 2018-06-22 07:35:15

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

代码语言:javascript
复制
<script defer type="text/javascript" src="test.js"></script>

  • appendChild接受一个元素作为参数,而不是你需要附加到
  • 的字符串,而不是你想要附加一个body字符串的document本身。如果你想要附加一个超文本标记语言字符串,分配/连接到.innerHTML.innerHTML property
  • Assigning

.innerHTML将破坏对内部元素的现有引用,包括侦听器。为了保持监听器处于活动状态,请改用insertAdjacentHTML

代码语言:javascript
复制
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>');

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50978754

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档