当使用下面的代码时,我无法将HTML字符串添加到目标HTMLElement的innerHTML中。我究竟做错了什么?有一个更好的方法吗?

<html>
    <head>
        <title>Add HTML input with jQuery</title>
        <!--
         *  This code is meant to include the jQuery library v.1.9.1
         *  from Google API
         -->
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>
        <script>
            $('document').ready(function(){
                $('#add').click(function(){
                    var src = $('#src');    // alert(src);
                    var trgt = $('#src');   // alert(trgt);
                    var x = null;
                    var child = null;
                    var str = null;

                    if(null != src.val()){
                        alert(1);
                        x = trgt.children().length;

                        str = '<input type="text" name="array[]" id="index' + x + '" value="' + src.val() + '" />';

                        trgt.html().append(str);


                        src.val() = null;
                    }else{
                        alert('src value is emppty');
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="box">
                <label></label> <input type="text" name="src" id="src" value="" /> <button id="add">+</button>
                <div id="trgt">
                </div>
        </div>
    </body>
</html>

最佳答案

这不是我注意到的唯一问题。

var trgt = $('#trgt')应该是trgt.html().append(str);

然后trgt.append(str);,您是否要重置src.val() = null;值?您只需使用<input>

参见此jsfiddle

关于javascript - jQuery,附加HTML字符串不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20449356/

10-10 02:01