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

Question

Possible Duplicate:
Escaping text with jQuery append?

My HTML is somewhat like this:

        
                      

              相关标签:
       
      

Answer 1

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

Answer 2

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

Answer 3

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.