How to dynamically create mixed HTML content in jQuery

Question

Considering I want to create this HTML dynamically:

<li><img src="a"/>some text</li>

Some text is a text string that is potentially unsafe, let's say is stored in variable 'some_text'.

The idea is to call $('<li>').append($('<img>').attr({src:"a"}), ... );

Using $(some_text) is bad idea because it's unsafe.

Using text(some_text) doesn't work because the text is not an only child of an element.

I do not want to wrap the text into a <span>

I do not want to invent/use a function that sanitizes or escapes the string

Why don't you want to sanitize the text --- I can't imagine that there is any other way to keep from having security issues -- that's why php, angular, and every thing else does sanitize. So? what is your goal and why is a function now a good solution? — JoelParke
– JoelParke, Commented Jul 11, 2015 at 9:03
Because jQuery has functions that deal with arbitrary text safely (i.e. text()) — Pawel Veselov
– Pawel Veselov, Commented Jul 11, 2015 at 9:04

JJJ · Accepted Answer · 2015-07-11 09:03:03Z

1

There are many ways, but possibly the simplest is to first add the text content to the li element and then prepend the image to get the correct order.

$('<li>').text(some_text).prepend($('<img>').attr({src:"a"}), ... );

answered Jul 11, 2015 at 9:03

JJJ

33.2k20 gold badges95 silver badges103 bronze badges

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

Collectives™ on Stack Overflow

How to dynamically create mixed HTML content in jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related