Question

所以我试图在javascript中动态创建一个新按钮并使用一些jquery。此功能由于某种原因不起作用。它似乎在追加功能上有所动摇。有什么建议吗？

这是.js函数

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

html。应将新按钮添加到输入类型

的位置

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

Answer 1

.append()将新元素添加为子元素，如果您要追加的元素。

<input>元素不能生孩子。

您可能想要调用.after()，它会在元素后面立即将新元素作为元素父元素的子元素插入。

Answer 2

您要将新按钮添加到其他按钮中。尝试使用＆＃39; after（）＆＃39;方法

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

Answer 3

input类型button不是您可能需要的容器insertAfter()

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

Answer 4

您需要使用.after（）和.last（）方法在输入后追加，这样您就不会重复。您还可以使用.append（）附加到英雄单位。

无论

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

或

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

Answer 5

为什么不在使用jQuery时使用jQuery？

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

Answer 6

您正在尝试在JQuery选择器中添加dom元素，这不适用于.append()函数。您可以使用JQuery而不是document.createElement..()来附加它来创建元素;

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

在JavaScript中动态添加新按钮

6 个答案: