Alternative to jQuery append()

Question

When adding text to an element, jQuery's append() function adds quotation marks around text. I want to change that, and instead separate values by comma or whatever I come up with. Is there an alternative to append() that will do that ?

To give it some context, I'm using jQuery to dynamically write to a hidden <input> element.

Currently after a few additions (using append) the resulting HTML looks like this:

<input type="hidden">"first"
    "second"
    "third"
</input>

In an ideal world, the HTML should come out looking like this:

<input type="hidden">first, second, third</input>

Using jQuery to read, concatenate, and then replace the original <input> text might work, but I don't see a function that will do a wholesale replace of innerHTML (I'm assuing it's called that).

Thoughts ?

You're doing it wrong. INPUT elements have an empty content model - they don't have "innerHTML". It should be: ``. — Šime Vidas, Sep 22 '11 at 22:11

score 3 · Answer 1 · answered Sep 22 '11 at 22:27

in jquery:

<div id="test"></div>

$('#test').append('a');
$('#test').append('b');

will look like this (in chrome dev tool):
<div id="test">
"a"
"b"
</div>

while

<div id="test"></div>

$('#test').html($('#test').html() + 'a');
$('#test').html($('#test').html() + 'b');

will look like this:

<div id="test">ab</div>

the dom tree in both cases is the same, only it shows it in chrome dev tool with the quotes (they are not really there, right click -> edit as html and they will disappear)

score 1 · Accepted Answer · answered Sep 22 '11 at 22:10

The big problem here is that input values are set in the value attribute, not as an inner child:

<input type="hidden" id="myInput" name="myInput" value="first">

To do what you seem to want, you'd probably want to change the value of the input with .val():

$('#myInput').val($('#myInput').val() + ', second');

score 0 · Answer 3 · answered Sep 22 '11 at 22:14

0

Alternatively you could append text to a hidden span:

<style> #hidden { display:none; } </style>

<span id="hidden"></span>

<script>
var x; // Where 'x' is the data that you would like to append.
$('#hidden').append(x);
</script>

answered Sep 22 '11 at 22:14

Josiah

1,117
5
22
35

1

Won't be submitted with the form. – Dave Newton Sep 22 '11 at 22:15

rlemon · Answer 4 · 2011-09-22T22:34:22.913

(function($) {
    $.fn.iappend = function(str) {
        return this.each(function(){
            var $this = $(this);
            if($this.val().length > 0) {
                $this.val($this.val() + "," + str);
            } else {
                $this.val($this.val() + str);
            }
        });
    };
})(jQuery);

I haven't fully tested it yet.. but it should work..

$("#hidden").iappend("first").iappend("second").iappend("third");

output

Hello,World,!

Alternative to jQuery append()

4 Answers4