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讓我瘋狂

回答

相關問題