从javascript向div添加内容

I would like to load a script that contains the content of a div on my html page. I know this is possible, but I am struggling to understand how to do it. Here is my html:

我想在我的html页面上加载包含div内容的脚本。我知道这是可能的,但我很难理解如何做到这一点。这是我的HTML:

<html>
<body>
<script src="script.js"> </script>
<div id="helloWorld"> </div>
</body>
</html>

What would script.js have to be for the html page to display something? I was thinking something like this (I know it's incorrect, I'm a beginner at javascript.

script.js必须为html页面显示什么东西?我在想这样的事情(我知道这是不对的,我是javascript的初学者。

function showText()
{
    $("#helloWorld").html("<p> Hello World! </p>")
    $("#helloWorld").show();

}
showText()

Can someone tell me whether or not I'm on the right track, and how I could fix this? Thanks, Sam

有人能告诉我我是否走在正确的轨道上,以及我如何解决这个问题?谢谢,山姆

4 个解决方案

#1

Your code is jQuery:

你的代码是jQuery:

$("#helloWorld").html("<p> Hello World! </p>")
$("#helloWorld").show();

and you don't need $("#helloWorld").show();.

你不需要$(“#helloWorld”)。show();.

In plain JavaScript,

在纯JavaScript中,

function showText()
{
    document.getElementById("helloWorld").innerHTML="<p> Hello World! </p>";
}
showText()

But remember to call showText() after the loading of the div in the DOM! (For example, call it just before </body> tag).

但是记得在DOM中加载div之后调用showText()! (例如,在标记之前调用它)。

Then,

<html>
<head>
...
<script type="text/javascript" src="script.js"></script>
...
</head>
<body>
...
<script type="text/javascript">
showText();
</script>
</body>
</html>

And script.js:

function showText(){
    document.getElementById("helloWorld").innerHTML="<p> Hello World! </p>";
}

#2

I think it does nothing (I assume) becaue your script tag is before the div itself. If you're using JQuery, you should put your initial code into the ready function, in your case:

我认为它没有做任何事情(我假设)因为你的脚本标签在div本身之前。如果您正在使用JQuery,那么您应该将初始代码放入ready函数中,在您的情况下:

$(document).ready(function(){
  showText();
});

#3

When your script loads, the HTML element "#helloWorld" still doesn't exist.

加载脚本时,HTML元素“#helloWorld”仍然不存在。

Use $(document).ready like this:

使用$(document).ready就像这样:

function showText() {
    $("#helloWorld").html("<p> Hello World! </p>")
    $("#helloWorld").show();
}
$(document).ready(function() {
    showText();
});

#4

the syntax you are trying to use requires JQuery. You can download the latest JQuery library here http://jquery.com/

您尝试使用的语法需要JQuery。您可以在http://jquery.com/下载最新的JQuery库

Then you can use the following in order to add text to your div:

然后,您可以使用以下内容为div添加文本:

$(document).ready(function(){
  var showText = function(){
    $("#helloWorld").html("<p> Hello World! </p>")  
    $("#helloWorld").show();
  };    
  showText();
});

Edited: I have added in the $ character at the start of (document), also, it is not necessary to have the .show() function on your div as it is already visible. If you do however set that div's display to none, you should use .show() to display the div.

编辑:我已经在(文档)的开头添加了$字符,也没有必要在你的div上有.show()函数,因为它已经可见了。但是,如果您将div的显示设置为none,则应使用.show()显示div。

#1