jQuery create element containing child element

Question

Creating a div element in jQuery does a good job on describing how to create and insert an element, however, I wish to create an element with a child element such as <li><a href="abc.html">click</a></li>. The href and text is susceptible to XSS, so I need take steps. I could create the <a> element like:

var href='abc.html',text='click';
jQuery('<a/>', {
    href: href,
    text: text
}).appendTo('#mySelector');

How do I modify this to include the </li> element?

score 10 · Accepted Answer · answered Oct 10 '14 at 14:25

10

wrap it up:

$(document).ready(function() {
  var href='abc.html',text='click';

jQuery('<a/>', {
    href: href,
    text: text
}).wrap("<li>").parent().appendTo('#mySelector');


})

http://codepen.io/anon/pen/Eyqco

answered Oct 10 '14 at 14:25

LorDex

2,544
1
15
29

score 2 · Answer 2 · answered Oct 10 '14 at 14:32

2

Personnaly, i like to do it in html directly :

var html = "";
html += "<li>";
html += "<a href='www.google.com' >click me</a>";
html += "</li>";

$("myselector").append(html);

answered Oct 10 '14 at 14:32

Mathieu Labrie Parent

2,578
1
8
10

3

As I indicated, the text `ckick me` is user provided. This could result in XSS. – user1032531 Oct 10 '14 at 15:25

score 1 · Answer 3 · answered Oct 10 '14 at 14:23

1

Firstly you could append the <li> tag to the element with the id mySelector.

$('<li>').appendTo('#mySelector');

Then you append your <a> tag to the li element.

answered Oct 10 '14 at 14:23

LiamWilson94

438
2
7
24

Thanks LiamWilson. Thought there might be a more direct way to do so. – user1032531 Oct 10 '14 at 14:24
@user1032531 there is. check my answer ;) – LorDex Oct 10 '14 at 14:27
Alternatively, you could wrap the li element around the tag. – LiamWilson94 Oct 10 '14 at 14:27

jQuery create element containing child element

3 Answers3