1

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>
4

6 回答 6

3

.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.

于 2013-04-16T14:56:55.350 回答
1

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

$('input[type="button"]').after(element);
于 2013-04-16T14:57:28.273 回答
1

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

 $(element).insertAfter('input[type="button"]');
于 2013-04-16T14:58:25.083 回答
1

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);
于 2013-04-16T15:00:32.843 回答
0

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
}
于 2013-04-16T14:59:26.247 回答
0

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)
于 2013-04-16T15:00:49.580 回答