Using HTML in a jQuery string

Question

I'm not experienced with JS, so please excuse the presumably very beginner question.

I have this line:

$el.text(type + "|");

I need to wrap the "|" in span tags such as '<span class="">|</span>' though when I do so it simply prints out the tags as text as opposed to embedding them as HTML wraps.

How do I go about doing this?

Can I ask what it is that this is doing? What's type, where is it defined? What is $el? What's the end-result you're trying to achieve? What you're asking is quite easy, but I'm not convinced that what you're asking is necessarily the best solution to the problem you're trying to solve. — David Thomas
– David Thomas, Commented May 2, 2015 at 11:34

Shaunak D · Accepted Answer · 2015-05-02 11:41:36Z

5

Use .html() to print out HTML content, text prints out plain text.

$el.html(type + "<span class=''>|</span>");

or

$el.html(type).append($('<span/>',{text : '|'}));

edited May 2, 2015 at 11:41

answered May 2, 2015 at 11:27

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrei CACIO · Accepted Answer · 2015-05-02 11:33:53Z

1

You can dynamically create your span element using this syntax:

var $el = $('<span>').html('|');

answered May 2, 2015 at 11:33

Andrei CACIO

2,12915 silver badges28 bronze badges

Comments

Leth0_ · Accepted Answer · 2015-05-02 11:34:19Z

1

This fiddle contains my solution. The fiddle uses a button to make it clear what is actually happening. I also added a style to the span so you can see it being added.

https://jsfiddle.net/g0n71se7/

$("#test").append("<span> | <span>");

By using the jQuery append you will insert content to the end of an element. You could alternatively use prepend to insert at the start of an element.

answered May 2, 2015 at 11:34

Leth0_

5342 gold badges6 silver badges15 bronze badges

Collectives™ on Stack Overflow

Using HTML in a jQuery string

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related