Few point to mention here:
- in your snippet there is a closing
</div>tag, this would lead to invalid HTML. - you have a table with one cell that holds a select button, I suggest that you use
<div>since table is made to be used for displaying data that meant to be viewed as a table. - you have another table with no
<tr>,<td>, and appending the form tag to id, not having<tr>,<td>tags will be invalid HTML and cause the HTML to not render. - the hidden forms use
idattribute of1and2although its parsed and recongniszed by the browser I suggest that you use a more meaningful ids. -
one last thing as a suggestion is to use the
display/visibility/opacityattributes to toggle show/hide the forms instead of appending them here.Here is a snippet with a working HTML from your snippet:
function changedesc(){
var eID = document.getElementById("colors");
var colorVal = eID.options[eID.selectedIndex].value
if (colorVal=="1"){
var frm = document.getElementById(1).cloneNode(true);
console.log(frm);
frm.id="new-form1"
frm.removeAttribute("style");
var ff = document.getElementById("form-td");
ff.innerHTML = "";
ff.appendChild(frm);
}
if (colorVal=="2"){
var frm = document.getElementById(2).cloneNode(true);
frm.id="new-form2"
frm.removeAttribute("style");
var ff = document.getElementById("form-td")
ff.innerHTML = "";
ff.appendChild(frm);
//how to remove previuos one
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border ="1" align='center'>
<tr>
<td>
<select id="colors" onchange="changedesc()">
<option value="1">Desc1</option>
<option value="2">Desc2</option>
<option value="3" >Desc3</option>
<option value="4">Desc4</option>
<option value="5">Desc5</option>
<option value="6" >Desc6</option>
</select>
</td>
</tr>
</table>
<table id ="addform">
<tr>
<td id="form-td"></td>
</tr>
<!-- to be inserted here the div-->
</table>
<form id=1 style="visibility: hidden;">
<input type="text">
<textarea>abc</textarea>
</form>
<form id=2 style="visibility: hidden;">
<input type="text">
<input type="checkbo">
</form>
<script>
</script>
</body>
</html>