與HTML選擇標記混合的Javascript（innerHtml）

我目前正在學習有關HTML，PHP，JavaScript和其他有趣的網頁內容。此時，我設法用HTML，CSS和PHP創建了一個漂亮的Web表單。與HTML選擇標記混合的Javascript（innerHtml）

幾天前我想用JavaScript添加一些動態選項，但現在我正在打牆。我決定把它寫入一個.js文件，並通過javascript構建它，而不是將我的表單寫入一個html文件。下面是我如何做它：

<!-- Insert the form into <div id=field> --> 
... 
document.getElementById(field).innerHTML += 
'<label>Name' 
    +'<span class="small">ex: stg_testdb1</span>' 
+'</label>' 
+'<input type="text" name="name" id="name" />'; 

document.getElementById(field).innerHTML += 
'<label>Layer</layer>' 
+'<span class="small">ex: stg_testdb1</span>' 
+'<select name="layer" id="layer"/>' 
    +'<option value="Development">D</option>' 
    +'<option value="QA">A</option>' 
    +'<option value="Staging">S</option>' 
    +'<option value="Production">P</option>'; 
+'</select>'; 
....

這裏是「選擇」，「輸入」和「標籤」標籤我的CSS代碼

#stylized select{ 
font-size:12px; 
padding:4px 2px; 
border:solid 1px #aacfe4; 
width:200px; 
margin:2px 0 20px 10px; 
} 

#stylized input{ 
float:left; 
font-size:12px; 
padding:4px 2px; 
border:solid 1px #aacfe4; 
width:200px; 
margin:2px 0 20px 10px; 
} 

#stylized label{ 
display:block; 
font-weight:bold; 
text-align:right; 
width:145px; 
float:left; 
}

當我寫我的形式，純HTML ，一切都很完美。這裏是表格的一部分的圖片：

：

Working fine in pure html

但是，當我使用innetHTML + =一切似乎除了下拉框（選擇欄），以做工精細寫在javascript Not working fine with javascript

我有點困惑，因爲CSS保持完全一樣。另外，如果我嘗試在第一個文本字段下添加另一個文本字段，則一切都會很好，並且格式正確。

由於我是新進入網絡開發，我想我錯過了一些大事？另外，我敢肯定，插入代碼並不是正確的做法，但現在它幾乎可以正常工作;）

來源

2012-09-12 Cocotton

但是，爲什麼你想它呢？ – yckart

您是否在Chrome Safari或Firefox中檢查了錯誤控制檯？ – reporter

可能是一些CSS問題，或者您可能錯過了班級名稱或ID。使用Firefox瀏覽器控制檯進行檢查。 –

我不知道這是否是解決方案，但在你的JS，有：

<label>Layer</layer>

我認爲你的意思

<label>Layer</label>

來源

2012-09-12 13:52:24 Mageek

很可能是因爲:) **編輯：**這被接受，因爲我正在打字！ –

哦...... Dislexia正在引人注目......我非常抱歉，非常感謝你的時間。（天哪，我現在覺得自己像個白癡） – Cocotton

@Cocotton沒關係！在編程方面，所有內容都越來越精確。 – Mageek

您的問題中沒有足夠的信息來重新創建問題（缺少很多CSS和可能的HTML）。但是，既然你知道你的CSS沒有改變，就必須有一些HTML不合適的地方。

JavaScript創建HTML元素的方式必須與靜態HTML不同。在單獨的窗口中打開這兩個頁面，並使用Firebug（用於Firefox）或Developer Tools（在Chrome中）檢查爲每個頁面生成的HTML（HTML/Elements選項卡）。找到差異並在JavaScript中更正它。

很可能你錯誤地輸入了一個或兩個元素。

希望這會有所幫助。

來源

2012-09-12 13:50:21 Travis

與HTML選擇標記混合的Javascript（innerHtml）

回答

相關問題