我如何使用JavaScript的HTML？

Question

我是Javascript和html的初学者。 我想输出10“嗨”，但以下代码不起作用。 我该怎么办？

index.html和app.js位于同一个文件夹中。

的index.html

<html>
<head>
</head>
<body>
<div class = "test"></div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

var main = function(){
for(var i = 0; i<10; i++){
    var f = document.createElement('p');
    f.innerText = "Hi.";
    var div = document.getElementByClass('test');
    div.appendChild(f);
};
$(document).ready(main);

Answer 1

查看浏览器的JavaScript错误控制台
请参阅有关$ undefined的错误，从而导致参考错误
定义$ （您可能希望通过包含jQuery库来实现）

或者，只需摆脱$(document).ready(main); 并直接调用main() 。 你似乎没有任何jQuery需求。

然后你必须与getElementByClass竞争不是一个函数。 请参阅getElementsByClassName或querySelector 。

Answer 2

首先，你要引用jQuery库而不包括它

$(document).ready(main);

添加到jquery库的链接：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

然后你的脚本有一些错误：

尝试使用浏览器的开发人员控制台进行调试

您的代码应如下所示：

var main = function(){
    /*no need to exec this for all loops iteration
    and the right method is getElementByClassName not getElementByClass */
    var div = document.getElementByClassName('test')[0];

    for(var i = 0; i<10; i++){
        var f = document.createElement('p');
        f.innerText = "Hi.";    
        div.appendChild(f);
    };
} /*you forgot to close the function*/
$(document).ready(main);

Answer 3

(function () {
    for (var i = 0; i < 10; i++) {
      var f = document.createElement('p'),
          div = document.querySelector('.test');

      f.innerText = 'Hi';
      div.appendChild(f);
    }
})();

Answer 4

几件事：

您需要包含jQuery库
你的功能缺少关闭}
它是getElementsByClassName ，而不是getElementByClass
如果它只是一个div，为什么不使用ID呢？ 像这样：

 $(function () { for (var i = 0; i < 10; i++) { var f = document.createElement('p'); f.innerText = "Hi."; var div = document.getElementById('test'); div.appendChild(f); } });

的jsfiddle

我如何使用JavaScript的HTML？

问题描述

4 个解决方案

解决方案1
7 已采纳 2015-01-07 11:56:11

解决方案2
2 2015-01-07 11:56:10

解决方案3
2 2015-01-07 12:02:47

解决方案4
0 2015-01-07 12:03:32

我如何使用JavaScript的HTML？

问题描述

4 个解决方案

解决方案1 7 已采纳 2015-01-07 11:56:11

解决方案2 2 2015-01-07 11:56:10

解决方案3 2 2015-01-07 12:02:47

解决方案4 0 2015-01-07 12:03:32

解决方案1
7 已采纳 2015-01-07 11:56:11

解决方案2
2 2015-01-07 11:56:10

解决方案3
2 2015-01-07 12:02:47

解决方案4
0 2015-01-07 12:03:32