jQuery document.createElement equivalent?

Question

I\'m refactoring some old JavaScript code and there\'s a lot of DOM manipulation going on.

var d = document;
var odv = d.createElement(\"div\");
odv.style.di         


        

Answer 1

since jQuery1.8, using $.parseHTML() to create elements is a better choice.

there are two benefits:

1.if you use the old way, which may be something like $(string), jQuery will examine the string to make sure you want to select a html tag or create a new element. By using $.parseHTML(), you tell jQuery that you want to create a new element explicitly, so the performance may be a little better.

2.much more important thing is that you may suffer from cross site attack (more info) if you use the old way. if you have something like:

    var userInput = window.prompt("please enter selector");
    $(userInput).hide();

a bad guy can input to tease you. fortunately, $.parseHTML() avoid this embarrassment for you:

var a = $('
')
// a is [
​
​]
var b = $.parseHTML('
')
// b is [
​
​]
$('')
// jQuery returns [​]
$.parseHTML('')
// jQuery returns []

However, please notice that a is a jQuery object while b is a html element:

a.html('123')
// [
​123​
​]
b.html('123')
// TypeError: Object [object HTMLDivElement] has no method 'html'
$(b).html('123')
// [
​123​
​]