CODEWITHSUNDEEP
javascriptjquery
Niko
Niko

Reputation: 26730

How to append/prepend/create a text node with jQuery

Possible Duplicate:
Escaping text with jQuery append?

My HTML is somewhat like this:

<div id="selector">Hello World</div>

Now I'd like to append some text to this div. I know that I could simply use

$('#selector').append(text);

but this wouldn't escape any special characters in text. Another way is to wrap the text in a span:

$('#selector').append( $('<span>').text(text) );

But this is ugly, because it creates unnecessary markup. So my current solution is to manually create a TextNode:

$('#selector').append( document.createTextNode(text) );

I was wondering whether there is any jQuery-style way to do this?

Upvotes: 34

Views: 23046

Answers (3)

Andreas
Andreas

Reputation: 21911

$.text() accepts also a function as parameter. This function will receive an index and the current text. The return value of the function will be set as the new text.

.text( function )

function
Type: Function( Integer index, String text ) => String
A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.

$("li").text(function(idx, txt) {
   return txt + " <item>";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

Upvotes: 2

lonesomeday
lonesomeday

Reputation: 238095

The createTextNode approach is probably the best way to go. If you want to have a jQuery-ish syntax, you could make a plugin.

$.fn.appendText = function(text) {
    return this.each(function() {
        var textNode = document.createTextNode(text);
        $(this).append(textNode);
    });
};

Upvotes: 38

Orson
Orson

Reputation: 15451

You can use;

$.extend({
        urlEncode: function(value) {
            var encodedValue = encodeURIComponent(value);
            encodedValue = encodedValue.replace("+", "%2B");
            encodedValue = encodedValue.replace("/", "%2F");

            return encodedValue;
        },
        urlDecode: function(value) {
            var decodedValue = decodeURIComponent(value);
            decodedValue = decodedValue.replace("%2B", "+");
            decodedValue = decodedValue.replace("%2F", "/");

            return decodedValue;
        }
});

to escape HTML characters before you append to the DOM.

Use it like; $.urlEncode(value)

Using it; $('#selector').append($.urlEncode(text));

Update #1

You could this $('#selector').html($('#selector').html() + text);

I suspected this was what you wanted.

Upvotes: -3

Related Questions