InnerHtml让我疯狂

-1

要动态地使用JavaScript插入HTML代码，我们在选择标签后使用innerHTML。很简单，但对我来说不行。我已经看到一些关于SO和互联网的链接。InnerHtml让我疯狂

我的代码如下：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Javascript experiments</title> 
    <link rel="stylesheet" type="text/css" href="assets/app_item.css"/> 
    <!--script language="javascript" type="text/javascript" href="assets/inserting_items.js"></script--> 
    <script language="javascript" type="text/javascript"> 
     function insert_items(how_much){ 
     for(var i=0; i < how_much; i++){ 
      var div_cont = document.getElementById("my_container"); 
      console.log(div_cont); 
      div_cont.innerHtml = "<div class='desc_container'><span class='desc'>Some text</span></div>"; 
     } 
    } 
    </script> 
    </head> 
    <body> 
    <header> 
     <h3>Inserting code dynamically in webpage.</h3> 
    </header> 
    <p>By pressing the button, it will insert items in webpage</p> 
    <label>How much:</label> 
    <input type="text" id="how_much"/> 
    <input type="button" value="Submit" onclick="insert_items(document.getElementById('how_much').value)"/> 
    <div id="my_container"></div> 
    </body> 
</html>

当我按下按钮，没有任何发生。动态内容不会添加到页面上。我在Firefox和Chrome上进行了测试。即使是最简单的div_cont.innerHtml = 'asdasd'也不行。此代码非常简单，但无法正常工作。这种行为是否有特定的原因？

来源

2015-11-07 learner

'.innerHTML' - 外壳是很重要的 – JAAulde

太可惜了。谢谢回复。 – learner

注意你的.innerHTML资本：

div_cont.innerHTML = "<div class='desc_container'><span class='desc'>Some text</span></div>";

来源

2015-11-07 21:34:39 jami0821

对不起，这个可耻的错误。这个小细节造成了一些破坏。 – learner

应该div_cont.innerHTML = 'asdasd'。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Javascript experiments</title> 
 
    <link rel="stylesheet" type="text/css" href="assets/app_item.css" /> 
 
    <!--script language="javascript" type="text/javascript" href="assets/inserting_items.js"></script--> 
 
    <script language="javascript" type="text/javascript"> 
 
    function insert_items(how_much) { 
 
     for (var i = 0; i < how_much; i++) { 
 
     var div_cont = document.getElementById("my_container"); 
 
     console.log(div_cont); 
 
     div_cont.innerHTML = "<div class='desc_container'><span class='desc'>Some text</span></div>"; 
 
     } 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <h3>Inserting code dynamically in webpage.</h3> 
 
    </header> 
 
    <p>By pressing the button, it will insert items in webpage</p> 
 
    <label>How much:</label> 
 
    <input type="text" id="how_much" /> 
 
    <input type="button" value="Submit" onclick="insert_items(document.getElementById('how_much').value)" /> 
 
    <div id="my_container"></div> 
 
</body> 
 

 
</html>

来源

2015-11-07 21:35:39 Jaco

将值分配给未定义的对象成员时，控制台不会引发错误。 – JJJ

更正后，感谢@Juhana – Jaco

InnerHtml让我疯狂

回答

相关问题