Page 1 of 1

insertBefore not working with lastChild

Posted: Wed Jan 15, 2014 8:12 pm
by Da_Elf
here is the html. i want the new select to be added to the td before the +

Code: Select all

<table width="98%" cellpadding="2" cellspacing="0" border="1" style="border-collapse:collapse">
<tr>
<td id="cel0">
<select name="name" id="name">
<option value="Maegan">Maegan</option>
<option value="Sharen">Sharen</option>
</select>
<br />
<span onclick="add('cel0')" style="display:block; width:20px; height:20px; background-color:#060; font-weight:bolder; color:#FFFFFF">+</span>
</td>
</tr></table>
this is the javascript

Code: Select all

function add(cel){
var cplace = document.getElementById(cel);
var sel = document.createElement("select");
sel.setAttribute("name", "person");
sel.setAttribute("id", "person");
cplace.insertBefore(sel, cplace.lastChild);
var select = document.getElementById("person");
var option = document.createElement("option");
option.text = "someone";
option.value = "someone";
select.appendChild(option);
var dele = document.createElement("span");
dele.setAttribute("style", "display:inline-block; width:20px; height:20px; background-color:#990000; font-weight:bolder; color:#FFFFFF");
dele.setAttribute("id", "dele");
cplace.insertBefore(dele , cplace.lastChild);
document.getElementById("dele").innerHTML = "-";
}