How to insert html text with text() function?

Question

I need to change the content of an element which includes html.

I tried with this, but the html tags are printed

    $('#content-sections label').text('my text <span>a span element</span>');

This is printed as it:

my text <span>a span element</span>

Because you told jQuery to insert this as text... Wanted to post an answer but @Aurelio was faster :) — ElmoVanKielmo, Jun 28 '13 at 15:44
This doesn't deserve downvotes. He obviously is new at this and also has trouble asking a question. If people think the question can be improved, **do so by editing** not downvoting. It was pretty obvious what he tried to achieve. — Timmetje, Jun 28 '13 at 15:47
@Jaso2970 Also welcome to our community, please accept the answer which helps you the most. Other people please stop adding the same answers but just upvote the current correct answers. Three correct answers is **MORE** then enough. — Timmetje, Jun 28 '13 at 15:53
@timmied I tried to accept the answer 3 minutes after I posted it. But I get message saying I must to wait 11 minute to do that — Jaso2970, Jun 28 '13 at 15:56
@Jaso2970 It was just a heads up to prevent more double answers;) Good luck with your project. — Timmetje, Jun 28 '13 at 15:57

score 5 · Accepted Answer · answered Jun 28 '13 at 15:43

5

You have to use html() for this. For example:

$('#content-sections label').html('my text <span>a span element</span>');

Oh, and for better performances, use this instead:

$('#content-sections').find('label').html('my text <span>a span element</span>');

answered Jun 28 '13 at 15:43

Aurelio De Rosa

score 1 · Answer 2 · answered Jun 28 '13 at 15:43

1

Try:

$('#content-sections label').html('my text <span>a span element</span>');

But i'm confused with your "including html text using jquery"

answered Jun 28 '13 at 15:43

Ivan Chernykh

score 1 · Answer 3 · answered Jun 28 '13 at 15:43

1

you have to set with html(value) function which sets the HTML contents of the first element in the set of matched elements.

  $('#content-sections label').html('my text <span>a span element</span>');

answered Jun 28 '13 at 15:43

Suresh Atta

score 0 · Answer 4 · edited Aug 05 '13 at 15:18

0

You have to use like the code below

$('#content-sections label').html('my text <span>a span element</span>');

jQuery.html() treats the string as HTML, jQuery.text() treats the content as text that is the reason its printing the span tag as well.

edited Aug 05 '13 at 15:18

Mark Schultheiss

answered Jun 28 '13 at 15:51

Pbk1303

score 0 · Answer 5 · answered Jun 28 '13 at 15:52

Aurelio's answer solves your problem.

But if you need to put a whole structure of html nodes, it's better to use this way:

var span = $("<span />").text('a span element');
$('#content-sections label').text('my text').append(span);

The first line creates the span with its contents

And the second does 2 things, it first sets the text of the label, then adds the span created in the first line after that text.

5 Answers5