Setting the InnerHTML for a div with buttons

Question

So I have a div that holds many buttons that gets created dynamically. By using the following:

var s = document.getElementById("CancelColumn").innerHTML;
s = s+ "<input class=\"CancelButt\" type=\"button\" value=\"X\" onclick=\"deleteRow(\""+value+"\",this)\">" ;
document.getElementById("CancelColumn").innerHTML = s;

The problem however is that in firefox the html is showing up as this:

<input class="CancelButt" type="button" SomeString",this)"="" onclick="deleteRow(" value="X"></input>

where the value is "SomeString".

In chrome it is a bit different though. The string has an extra space and the tag doesn't seem to be working correctly. Here it is:

I want it to show the following:

Where "this" is the button that is calling the function.

Any suggestions?

score 3 · Accepted Answer · answered Dec 07 '13 at 08:28

3

I'm not sure why this is happening, but you should improve your code anyway. Here's an example of improved code.

var element = document.getElementById('CancelColumn');
    newInput = document.createElement('input');

newInput.type = 'button';
newInput.value = 'X';
newInput.className = 'CancelButt';
newInput.onclick = deleteRow.bind(null, value, newInput); // whatever value is?

element.appendChild(newInput);

It's a lot cleaner and readable, I'm not surprised you're facing problems with the code you have.

answered Dec 07 '13 at 08:28

iConnor

19,997
14
62
97

Thanks, Had no idea I could do this. – Kelsey Abreu Dec 08 '13 at 19:13
Aren't you overwriting the invocation context with the `null` parameter? – tewathia Dec 09 '13 at 06:12
@tewathia if i didn't set `null`, the value would be `newInput` so it seems pointless to use `this` and `newInput` to access the element. of course you can change `null` to `newInput` – iConnor Dec 09 '13 at 07:39

tewathia · Answer 2 · 2013-12-07T08:47:04.487

1

Seems like such an inelegant way of doing it

Why not try this?

var inp = document.createElement('input');
inp.setAttribute('class', 'CancelButt');
inp.setAttribute('type', 'button');
inp.setAttribute('value', 'X');
inp.onclick = deleteRow.bind(inp, 2, inp); // you don't really need to pass the 'this' value to the deleteRow function though

Then you can just append the inp to your #CancelColumn

edited Dec 07 '13 at 08:47

answered Dec 07 '13 at 08:31

tewathia

6,890
3
22
27

rethink your `onclick` – iConnor Dec 07 '13 at 08:31
@connorspiracist Fixed. Thanks for pointing it out(although it was the OP's `onclick` I was just making the code readable) – tewathia Dec 07 '13 at 08:47

score 0 · Answer 3 · answered Dec 07 '13 at 08:25

0

Try this

s = s+ "<input class='CancelButt' type='button' value='X' onclick='deleteRow('"+value+"',this)'>" ;

answered Dec 07 '13 at 08:25

Yevgeniy.Chernobrivets

3,194
2
12
14

score 0 · Answer 4 · answered Dec 07 '13 at 08:25

0

Change your s = s+ "<input class=\"CancelButt\" type=\"button\" value=\"X\" onclick=\"deleteRow(\""+value+"\",this)\">" ; as s = s+ "<input class='CancelButt' type= 'button' value='x' onclick='deleteRow('+value+',this)\'">" ;

answered Dec 07 '13 at 08:25

Kawinesh S K

3,148
1
16
29

score 0 · Answer 5 · answered Dec 07 '13 at 08:35

0

How about this:

s = s +  "<input class='CancelButt' type='button' value='X'
             onclick='deleteRow("+value+",this)'/>";

answered Dec 07 '13 at 08:35

Joke_Sense10

5,341
2
18
22

score 0 · Answer 6 · edited May 23 '17 at 12:13

I'm not sure if I understand your question correctly... Do you want to have a div which you dynamically populate with buttons and when you click any of those buttons, they will move to another div?

In that case, I think your question is similar to this question - How to move an element into another element?

From Alejandro Illecas answer:

MOVE:

jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

COPY:

jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

note .detach() use. When copy be careful do not duplicate id's.

JSFiddle

I modified his solution in this JSFiddle in which you can see that you don't need a very cumbersome script to manage a move of an element.

jQuery

function moveButton(elem){
   if( $(elem).parent().attr("id") == "nonSelected" ){
      $(elem).detach().appendTo('#selected');
   }
   else{
      $(elem).detach().appendTo('#nonSelected'); 
   }
}

HTML

As you can see here, you can use different kinds of elements as well...

<div id="nonSelected">

   <!-- TWO INPUT TAGS --> 
   <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="Default" />
   <input id="btnPrimary" onclick="moveButton(this)" type="button" class="btn btn-primary" value="Primary" />

   <!-- THREE BUTTON TAGS -->
   <button id="btnDanger" onclick="moveButton(this)" type="button" class="btn btn-danger">Danger</button>
   <button id="btnWarning" onclick="moveButton(this)" type="button" class="btn btn-warning">Warning</button>
   <button id="btnSuccess" onclick="moveButton(this)" type="button" class="btn btn-success">Success</button>

</div>


<div id="selected">

</div>

Setting the InnerHTML for a div with buttons

6 Answers6

JSFiddle

jQuery

HTML