CODEWITHSUNDEEP
javascriptjquery
ono
ono

Reputation: 3102

Adding new button dynamically in JavaScript

So I'm trying to create a new button dynamically in javascript and using some jquery. This function doesn't work for some reason. It seems to falter at the append function. Any suggestions?

Here's the .js function 

SwapButton: function(){
    var element = document.createElement('input');
    element.setAttribute("type", "button");
    element.setAttribute("value", "Trash Letters");
    element.setAttribute("onClick", "GB.swapLetters()");
    document.getElementsByTagName('input')[0].appendChild(element);
    $('input[type="button"]').append(element);
}

The html. The new button should be added to where the input types are

<body>
    <div class="hero-unit">

                    <div class="row-fluid">
                        <div class="span8"></div>
                        <div id="timer" class="span4"></div>
                    </div>
                    <div class="row-fluid">
                        <div id="score-board" class="span8"></div>
                    </div>
                    <div class="row-fluid span12" id="word-area">

                    </div>

                    <div class="row-fluid" id="row1">
                        <div id="1" class="span2"></div>
                        <div id="2" class="span2"></div>
                        <div id="3" class="span2"></div>
                        <div id="4" class="span2"></div>
                        <div id="5" class="span2"></div>
                        <div id="6" class="span2"></div>
                    </div>


                    <div class="row-fluid" id="row2">
                        <div id="7" class="span2"></div>
                        <div id="8" class="span2"></div>
                        <div id="9" class="span2"></div>
                        <div id="10" class="span2"></div>
                        <div id="11" class="span2"></div>
                        <div id="12" class="span2"></div>

                    </div>

                    <input type="button" onClick="GB.check()" value="Check"></input>
                    <input type="button" onClick="GB.clear()" value="Clear"></input>
                    <input type="button" onClick="GB.start()" value="Start"></input>

    </div>

Upvotes: 1

Views: 182

Answers (6)

Taylor Hakes
Taylor Hakes

Reputation: 616

You need to use the .after() with .last() method to append after the inputs so you don't duplicate. You can also use .append() to append to the hero unit.

Either

var $button = $('<input type="button">').val('Trash Letters').click(GB.swapLetters);
$('.hero-unit input[type="button"]').last().after($button);

or 

$('.hero-unit').append($button);

Upvotes: 1

SLaks
SLaks

Reputation: 887305

.append() adds the new element as a child element if the element you're appending it to.

<input> elements cannot have children.

You may want to call .after(), which inserts the new element as a child of the element's parent, immediately after the element.

Upvotes: 3

Ahmet DAL
Ahmet DAL

Reputation: 4682

You are trying to add dom element in JQuery selector and this is not possibble with .append() function. You can create your element by using JQuery instead of document.createElement..() to append it;

var element =$('<input>',{type:'button',value:'Trash Letters'});
element.click(function(e){GB.swapLetters()})
elemend.appendTo(yourContainer)

Upvotes: 0

mplungjan
mplungjan

Reputation: 177754

Why not use jQuery when you are using jQuery?

SwapButton: function(){
    $("<input />", {"type":"button","value":"Trash Letters"})
     .on("click",function() { GB.swapLetters() })
     .appendTo("#row2"); // for example
}

Upvotes: 0

Adil
Adil

Reputation: 148110

The input type button is not a container you may need insertAfter()

 $(element).insertAfter('input[type="button"]');

Upvotes: 1

Bill
Bill

Reputation: 3517

you are appending the new button inside the other ones. try using the 'after()' method.

$('input[type="button"]').after(element);

Upvotes: 1

Related Questions