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.

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.

• javascript
• html

• Manipulating the dom without a library like jQuery will never work on all browsers unless you spend hours and hours on optimization - like this problem. I bet it would work with jQuery. – Marc Commented Mar 22, 2012 at 5:51
• @Marc seriously , that overdoes the level of sarcasmn :-) – ShrekOverflow Commented Dec 29, 2012 at 16:31
• Does it? Ok, I'm sorry :) – Marc Commented Dec 30, 2012 at 17:16

3 Answers 3

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');
}

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>";

if you are going with second option you can use setAttribute() method.

var ele = document.createElement('button');
ele.setAttribute('onclick','method_name');