2

What is the best way to create new text node and append it to the DOM?

I'm currently using this:

$('#someDiv').append(document.createTextNode('Some text'));

but is it the best way? Are there any other alternatives?

UPDATE

after checking the jQuery code I found that my variant probably the best...

here is how .text() function implemented in jQuery:

text: function( value ) {
    return jQuery.access( this, function( value ) {
        return value === undefined ?
            jQuery.text( this ) :
            this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
    }, null, value, arguments.length );
},

so, .text() function calls .createTextNode() method, so if you wish to save on calling extra operations, it's better to use direct text's node .append()

Mr. Pumpkin
  • 6,212
  • 6
  • 44
  • 60

3 Answers3

3

It's as simple as using .text()

$("#output").text("Hello, World!");
MaxArt
  • 22,200
  • 10
  • 82
  • 81
0

I think that's what you're looking for

To get rid of all the text within that <div>

$('#someDiv').html("Some Text");

To append text to it

$('#someDiv').append("Some Text");

To prepend ...

$('#someDiv').prepend("Some Text");

EDIT

With this string "Some text" .html() and .text() would render the same.

.text() will not escape special characters

$('#someDiv').text("<b>Hello</b>");
==> <b>Hello</b>

.html() will

$('#someDiv').html("<b>Hello</b>");

==> Hello

rorofromfrance
  • 1,854
  • 12
  • 21
  • That wouldn't escape characters like `&` and `<`. – MaxArt Apr 11 '14 at 15:19
  • 1
    why to use .html() if for text better to use .text()? – Mr. Pumpkin Apr 11 '14 at 15:20
  • "jQuery.html() treats the string as HTML, jQuery.text() treats the content as text." source: http://stackoverflow.com/questions/1910794/what-is-the-difference-between-jquery-text-and-html – rorofromfrance Apr 11 '14 at 15:21
  • 2
    I know what is the difference between html() and text() :), I mean I don't need HTML... the question about plaint text only... I usually prefer to build HTML using .appent(), .appentTo() and others – Mr. Pumpkin Apr 11 '14 at 15:24
  • ha ok :) well if the question is how to append text to the DOM .. I would just do `$("body").append("text");` – rorofromfrance Apr 11 '14 at 15:32
  • 1
    no, the question was is there better way to add text node to DOM. And using .text() not better... it's simpler, but not better... – Mr. Pumpkin Apr 11 '14 at 16:01
-5

Like this : 

var yourtext = 'Some text';
$('#someDiv').append(yourtext);
xCNPx
  • 605
  • 4
  • 7
  • `.append()` processes the arguments as HTML, thus not escaping characters like `&` and `<`. – MaxArt Apr 11 '14 at 15:28
  • As some others have stated in the comments, he said nothing about escaping the content, only to "append" text to the DOM. But thank you for the note. – xCNPx Apr 11 '14 at 15:34
  • Appending text just isn't the same as appending raw HTML code. Your and Alex' examples work well, but you can't say the same in the general case. – MaxArt Apr 11 '14 at 22:08
  • Dangerous answer. In a real-world app, _yourtext_ is probably coming from a database or HTML form submission, not a constant string. If you just use .append(), you're begging for an HTML injection attack. Never get in this habit, even if you're starting with safe string constants, because the next coder could replace the constant with something else, not knowing that you didn't bother to escape the value when you rendered it. – Canuck Sep 09 '15 at 11:17