Question

确定。我感到愚蠢！我一直在尝试做一些非常简单的事情，却发现很难做到或找不到。我想做的就是：

显示index.html文件。
我想要一个单独的JavaScript文件，其中包含我的所有JavaScript代码。完全分开，所以我的HTML文件中没有任何JavaScript代码。我不想要点击事件或任何花哨的东西。
我只想让页面显示Hello World！ onLoad从JavaScript函数中获取它。

BTW：似乎所有教程都将JavaScript代码放入HTML中，或者他们想向您展示如何做一些奇特的事情。我一直都无所适从。

我最接近的是下面列出的。我放弃！一点帮助将是如此赞赏。

的index.html：

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="script.js"></script>
    </head>
    <body>
        <script type="text/javascript"></script>
    </body>
</html>

的script.js：

window.onload = function() {
   var result="Hello World!";
   return result;
};

Answer 1

如果要追加到正文，可以创建文本节点（createTextNode()），然后直接将其附加到body：

    window.onload = function() {
      var result = document.createTextNode("Hello World!");
      document.querySelector('body').appendChild(result);
    };

Answer 2

如果你想抓住放置文件的地方，你需要解决它。

EG。

<body>
  <div id="place-for-text"></div>
</body>

然后在你的剧本中：

var elem = document.getElementById('place-for-text');
elem.innerHTML = 'Hello world.';

这是以最简单的方式来控制其中的一部分。

您可以更喜欢并添加DOM元素：

var elem = document.getElementById('place-for-text');
var text = document.createTextNode('Hello world');
elem.appendChild(text);

Answer 3

您可以执行的操作是在页面加载时将所需文本打印到<body>元素。这样的事情可以解决问题：

window.onload = function() {
   var result="Hello World!";
   document.querySelector('body').innerHTML(result);
};

或者，如果您在网页上有特定位置要加载此文字，则可以在HTML中创建一个元素，为其添加一个唯一的id并在JavaScript中引用它：

<body>
    ...
    <div id="myAwesomeElement"></div>
    ...
</body>

并在JavaScript中：

window.onload = function() {
   var result="Hello World!";
   document.querySelector('#myAwesomeElement').innerHTML(result);
};

Answer 4

在你的javascript函数中，你可以这样做：

document.getElementById("divID").innerHTML="Hello World!";

并在你的html文件中创建一个div或span或你想要修改的东西（在这种情况下，内部html内容）：

<body>
    <div id="divID"></div>
</body>

当调用该函数时，它将找到ID为＆＃34; divID＆＃34;的dom元素，而innerHTML将是您为Hello World分配的内容。你也可以修改其他属性，比如css风格的东西。

Answer 5

有多种方法可以解决您的问题。第一种方式只会改变你的javascript。它使用document.write（）函数将文本写入文档。这是新的javascript：

window.onload = function() {
   document.write("Hello World!");
};

第二种方式也只会改变你的javascript。它使用document.createElement（）函数创建一个p标记，然后更改其中的内容，然后将其附加到正文。这是新的javascript：

window.onload = function() {
    var p=document.createElement("p");
    p.innerHTML="Hello World!";
    document.body.appendChild(p);
};

Answer 6

这是一种尚未显示的方式。您可以从文件头部删除脚本标记，因为我们希望在页面的其余部分之后加载js文件。将script.js源脚本标记添加到正文中。

//index.html
<!DOCTYPE html>
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
    <script src="script.js"></script>
</body>
</html>

script.js文件如下所示：

//script. js file
    !function () { document.querySelector("body").innerHTML = "hello world"; } ();

感叹号和以下（）会导致函数在加载时自动运行。有关详细信息，请查看此问题：What does the exclamation mark do before the function?

编辑

我还应该指出 document.write 和 .innerHTML 不被视为最佳做法。最简单的原因是document.write将重写页面而.innerHTML会导致DOM再次被解析（性能受到影响） - 显然，这个例子并不重要，因为它是一个简单的hello world页面。

document.write和.innerHTML的替代

 !function () { 
 var text = document.createTextNode("Hello World");
 document.querySelector("body").appendChild(text); 
 } ();

这有点痛苦，但你可以为这个过程编写一个函数，这没什么大不了的！好消息是，使用新的ecmascript 6（新的JavaScript），您可以将其转换为快速编写的箭头函数，如下所示：

//script.js
! function() {
   var addTextNode = (ele, text) => { //create function addTextNode with 2 arguments
     document.querySelector(`${ele}`).appendChild(document.createTextNode(`${text}`));
// ^ Tell the function to add a text node to the specified dom element.
 }
 addTextNode("body", "Hello World");
}();

这是一个JS Fiddle，它还向您展示了如何使用相同的函数追加到其他元素。

希望这有帮助！

Answer 7

window.onload = function() { document.write('Hello World') };

从window.onload返回并没有做任何有效的事情。您需要调用文档上的方法来操作页面。

HTML和JavaScript在单独的文件中 - 新手警报

7 个答案: