Adding a button with innerHTML property

Question

I'm trying to add html code inside a <span id="options"></span> so I'm trying to use this:

function editTextArea(element) {
   var options = document.getElementById("options");
   options.innerHTML = options.innerHTML + "Cols: <input type='text' id='colsTextArea' maxlength='3' /><br>Rows: <input type='text' id='rowsTextArea' maxlength='2' /><br><button type='button' onclick='updateTextArea('" + element.id + "')' >Add</button><br>";
}

But this is what I got,

<button type="button" onclick="updateTextArea(" textarea0')'="">Agregar</button>

My problem is with the quotes, so I later tried using createElement("button"), but now I can't add the onclick attribute.

I'm not using jQuery, so it would be nice to have a solution without it.

Answer 1

You need to use different quotes for the function call to updateTextArea than you do for the onclick attribute. You can't do onclick='alert('hi');', because the single quote terminates the onclick attribute.

function editTextArea(element) {
   var options = document.getElementById("options");
   options.innerHTML = options.innerHTML + "Cols: <input type='text' id='colsTextArea' maxlength='3' /><br>Rows: <input type='text' id='rowsTextArea' maxlength='2' /><br><button type='button' onclick='updateTextArea(" + '"' + + element.id + '"' + ")' >Add</button><br>";
}

You should definately consider doing this at least with the proper DOM API calls. You are right to try document.createElement

To set an onclick, do something like this:

var button = document.createElement('button').
button.onclick = function(){
 alert('I was clicked');
}

Answer 2

Can be done with escaping the quotes also:

options.innerHTML = options.innerHTML + "Cols: <input type='text' id='colsTextArea' maxlength='3' /><br>Rows: <input type='text' id='rowsTextArea' maxlength='2' /><br><button type='button' onclick=\"updateTextArea(\'" + id + "\')\" >Add</button><br>";