jQuery, appending HTML string not working

Question

When using the code below I am unable to add the HTML string to the innerHTML of the target HTMLElement. What am I doing wrong? Is there a better way to do this?

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

Yoda Conditions

Ingo Bürk
– Ingo Bürk

2013-12-08 03:07:25 +00:00
Commented Dec 8, 2013 at 3:07 — Ingo Bürk
– Ingo Bürk, Commented Dec 8, 2013 at 3:07

m59 · Accepted Answer · 2013-12-08 05:54:36Z

2

var trgt = $('#src'); ... Your source and target selectors are the same.

edited Dec 8, 2013 at 5:54

m59

43.9k14 gold badges122 silver badges139 bronze badges

answered Dec 8, 2013 at 3:03

Robert Levy

29.1k6 gold badges65 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Deryck Over a year ago

nice catch damn cant believe i didnt even notice that

Mark S · Accepted Answer · 2013-12-08 03:35:35Z

1

This var trgt = $('#trgt') is not the only problem I noticed.

There is trgt.html().append(str); which should be trgt.append(str);.

And then src.val() = null;, are you trying to reset the <input> value? You can simply do it with src.val('');

See this jsfiddle.

answered Dec 8, 2013 at 3:35

Mark S

3,7993 gold badges21 silver badges33 bronze badges

Collectives™ on Stack Overflow

jQuery, appending HTML string not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related