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.

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
– Marc, Commented Mar 22, 2012 at 5:51

GoldenNewby · Accepted Answer · 2012-03-22 05:55:49Z

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

Do you think if it is possible to do it within html like the following using Angular: in ts file: HTMLstring = '<button type="button">a button</button>'; in HTML <div [innerHTML] = "HTMLstring"> </div>

user732456 · Accepted Answer · 2012-03-22 06:07:34Z

1

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

answered Mar 22, 2012 at 6:07

user732456

2,7082 gold badges38 silver badges52 bronze badges

Comments

Punit · Accepted Answer · 2012-03-22 06:04:21Z

0

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

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

answered Mar 22, 2012 at 6:04

Punit

1,1201 gold badge8 silver badges15 bronze badges

Collectives™ on Stack Overflow

Adding a button with innerHTML property

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related