admin管理员组文章数量:1026989
Here is the code I have, I am trying to append the elements in the array to a drop down select box. The code works fine until the appendChild method. I can't figure out why that one line is not working. Here is the code
</head>
<body>
<h1> Eat Page</h1>
<p id="test">Hi</p>
<select id="CusineList"></select>
<script type="text/javascript">
var cuisines = ["Chinese","Indian"];
var sel = document.getElementById('CuisineList');
for(var i = 0; i <cuisines.length; i++){
var optionElement = document.createElement("option");
optionElement.innerHTML = cuisines[i];
optionElement.value = i;//cuisines[i];
//document.getElementById("test").innerHTML = cuisines.length;
sel.appendChild(optionElement);
}
</script>
<p> When </p>
</body>
</html>
Here is the code I have, I am trying to append the elements in the array to a drop down select box. The code works fine until the appendChild method. I can't figure out why that one line is not working. Here is the code
</head>
<body>
<h1> Eat Page</h1>
<p id="test">Hi</p>
<select id="CusineList"></select>
<script type="text/javascript">
var cuisines = ["Chinese","Indian"];
var sel = document.getElementById('CuisineList');
for(var i = 0; i <cuisines.length; i++){
var optionElement = document.createElement("option");
optionElement.innerHTML = cuisines[i];
optionElement.value = i;//cuisines[i];
//document.getElementById("test").innerHTML = cuisines.length;
sel.appendChild(optionElement);
}
</script>
<p> When </p>
</body>
</html>
- Are you getting any errors? How do you know it's not working? What does "not working" mean? – Jonathan M Commented Jul 2, 2012 at 3:09
- I believe there's a different way of going about appending elements when it es to select elements... – David G Commented Jul 2, 2012 at 3:09
3 Answers
Reset to default 4You have spell miss.
Your id is CusineList, but when you use CuisineList to select.
Beside that, your code works.
There's a typo on
var sel = document.getElementById('CuisineList');
This should be
var sel = document.getElementById('CusineList');
Or change your html. From
<select id="CusineList"></select>
To
<select id="CuisineList"></select>
When we append node using java script, after setting nodes' attributes/properties first we have to append this node into its related parent and after appending node, we can set its content or related inner HTML / text.
here is the solution for above issue:
var cuisines = ["Chinese", "Indian"];var sel = document.getElementById('CusineList');
var optionElement;
for (var i = 0; i < cuisines.length; i++) {
optionElement = document.createElement("option");
optionElement.value = i;
sel.appendChild(optionElement);
optionElement.innerHTML = cuisines[i];
document.getElementById("test").innerHTML = cuisines.length;
}
I have created a bin with the solution on http://codebins./codes/home/4ldqpcn
Here is the code I have, I am trying to append the elements in the array to a drop down select box. The code works fine until the appendChild method. I can't figure out why that one line is not working. Here is the code
</head>
<body>
<h1> Eat Page</h1>
<p id="test">Hi</p>
<select id="CusineList"></select>
<script type="text/javascript">
var cuisines = ["Chinese","Indian"];
var sel = document.getElementById('CuisineList');
for(var i = 0; i <cuisines.length; i++){
var optionElement = document.createElement("option");
optionElement.innerHTML = cuisines[i];
optionElement.value = i;//cuisines[i];
//document.getElementById("test").innerHTML = cuisines.length;
sel.appendChild(optionElement);
}
</script>
<p> When </p>
</body>
</html>
Here is the code I have, I am trying to append the elements in the array to a drop down select box. The code works fine until the appendChild method. I can't figure out why that one line is not working. Here is the code
</head>
<body>
<h1> Eat Page</h1>
<p id="test">Hi</p>
<select id="CusineList"></select>
<script type="text/javascript">
var cuisines = ["Chinese","Indian"];
var sel = document.getElementById('CuisineList');
for(var i = 0; i <cuisines.length; i++){
var optionElement = document.createElement("option");
optionElement.innerHTML = cuisines[i];
optionElement.value = i;//cuisines[i];
//document.getElementById("test").innerHTML = cuisines.length;
sel.appendChild(optionElement);
}
</script>
<p> When </p>
</body>
</html>
- Are you getting any errors? How do you know it's not working? What does "not working" mean? – Jonathan M Commented Jul 2, 2012 at 3:09
- I believe there's a different way of going about appending elements when it es to select elements... – David G Commented Jul 2, 2012 at 3:09
3 Answers
Reset to default 4You have spell miss.
Your id is CusineList, but when you use CuisineList to select.
Beside that, your code works.
There's a typo on
var sel = document.getElementById('CuisineList');
This should be
var sel = document.getElementById('CusineList');
Or change your html. From
<select id="CusineList"></select>
To
<select id="CuisineList"></select>
When we append node using java script, after setting nodes' attributes/properties first we have to append this node into its related parent and after appending node, we can set its content or related inner HTML / text.
here is the solution for above issue:
var cuisines = ["Chinese", "Indian"];var sel = document.getElementById('CusineList');
var optionElement;
for (var i = 0; i < cuisines.length; i++) {
optionElement = document.createElement("option");
optionElement.value = i;
sel.appendChild(optionElement);
optionElement.innerHTML = cuisines[i];
document.getElementById("test").innerHTML = cuisines.length;
}
I have created a bin with the solution on http://codebins./codes/home/4ldqpcn
本文标签： htmljavascript appendChild not workingStack Overflow
版权声明：本文标题：html - javascript appendChild not working - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745658431a2161738.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论