Attempting To Add A Button But Getting "[object Htmlinputelement]" Instead Of The Button

I'm trying to build buttons dynamically in a for loop where each iteration builds a button. I've done this before no problem and copied this code from an old project. Now I get [ob

Solution 1:

When you do

tableRow.append("<td>" + element + "</td>"); 

You are causing the browser engine to call toString() on the DOM node which results in what you are seeing. You need to create a td element and append the button to the TD element. and than append the td to the tr.

pure JS

var td = document.createElement("td");
td.appendChild(element);
tableRow.appendChild(td);  //or     tableRow.append(td);

or with jQuery

var td = $("<td></td>");
td.append(element);
tableRow.append("td"); 

Solution 2:

you just need to append the button to the body using parentElement.appendChild(element)

var 
  element = document.createElement("input");
element.className = 'appointmentClass'
element.id = 'countAppointments';
element.type = 'button';
element.name = 'name';
element.value = 'remove';
element.onclick = function (){
  alert('removed appointment '+ this.id)
  //  addShow(this.id);
}

document.body.appendChild( element );

Solution 3:

You are not appending DOM element anywhere. You can use parentNode.appendChild method which accepts argument as a node

Try this:

var parent = document.getElementById('conteiner');
for (var i = 0; i < 10; i++) {
  var
    element = document.createElement("input");
  element.className = 'appointmentClass'
  element.id = 'countAppointments' + i;
  element.type = 'button';
  element.name = 'name';
  element.value = 'remove';
  element.onclick = function() {
    alert(this.id);
    this.parentNode.removeChild(this);
  };
  parent.appendChild(element);
}

<divid="conteiner"></div>

Fiddle here

Solution 4:

you can try Jquery append method like:

$(".container").append("<input type="button" value="XXXX" name="XXXX" id="XXXXX">");

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Solution 5:

It turns out I can't append with for this input element. Removing this and just appending 'element' as I was previously works.