innerHTML and html:select tag

Question

I'm using JavaScript to add drop down in the jsp by clicking a button but somehow its not working. Can someone please help me. I need to use html:select tag.

<script language="JavaScript" type="text/javascript">
    function addRow() {
        var mytbody = document.getElementById('mytbody');
        var row = document.createElement('tr');
        var cell1 = document.createElement('td');

        cell1value='';
        cell1value+='<html:select property="test1" styleId="test1"> <html:option value="code1">test 1</html:option> </html:select>';    
        cell1.innerHTML = cell1value;       

         row.appendChild(cell1);    
         mytbody.appendChild(row);
    }
</script>

html codes:

<table id="mytable">
<tbody id="mytbody">
<tr>
    <td>test1</td>
</tr>
</tbody>
</table>

<input type="button" onclick="addRow()" value="test"/>
</form>
</body>
</html>

Thanks for your help

Answer 1

I made a jsfiddle to check it out... I think you might just need to have this javascript in the head tag.

Use F12 developer tools and try to debug the issue when you click the button. You might find that addRow() is undefined.

I also changed the code a little bit due to the fact that I am not versed in JSP - sorry! Is that what the

"<html:select..." 

string was? I changed it to straight up html.

http://jsfiddle.net/e7z1efgr/

 function addRow() { var mytbody = document.getElementById('mytbody'); var row = document.createElement('tr'); var cell1 = document.createElement('td'); var cell1value = ''; cell1value += '<select class="text1"><option value="code1">test 1</option></select>'; cell1.innerHTML = cell1value; row.appendChild(cell1); mytbody.appendChild(row); }

 <table id="mytable"> <tbody id="mytbody"> <tr> <td>test1</td> </tr> </tbody> </table> <input type="button" onclick="addRow()" value="test" /> </form> </body> </html>

Answer 2

Your problem is the strange HTML you are inserting:

'<html:select property="test1" styleId="test1"> <html:option value="code1">test 1</html:option> </html:select>'

should be

'<select property="test1" styleId="test1"> <option value="code1">test 1</option> </select>'

Answer 3

What's the purpose? If you just need it to insert rows inside the table, it works fine already:

Look here:

http://codepen.io/anon/pen/NGNJrV

Can you elaborate the question please?