IE doesn't create elements using $('<tag>') syntax

[marioestrada]

jQuery in IE is not creating the html elements that are being appended to dynamically created elements, both using the $('<tag>') syntax.

This code doesn't work in IE:

---

paginador = $('<div>').attr('class', 'paginador'); $('.pagina:eq(0)').before(paginador); btn_fwd = $('<a>').attr({'id': 'btn_fwd', 'href': '#', 'class': 'btn'}).text('>>'); btn_rew = $('<a>').attr({'id': 'btn_rew', 'href': '#', 'class': 'btn'}).text('<<'); paginador.append(btn_rew); paginador.append(btn_fwd);

---

This results in IE7 creating the <div> element, but not creating/appending the <a> elements.

To go around this I used:

---

paginador = $('<div>').attr('class', 'paginador'); $('.pagina:eq(0)').before(paginador); btn_fwd = $(document.createElement('a')).attr({'id': 'btn_fwd', 'href': '#', 'class': 'btn'}).text('>>'); btn_rew = $(document.createElement('a')).attr({'id': 'btn_rew', 'href': '#', 'class': 'btn'}).text('<<'); paginador.append(btn_rew); paginador.append(btn_fwd);

---

And it worked as expected.

[marioestrada]

doesn't work:

paginador = $('<div>').attr('class', 'paginador');
$('.pagina:eq(0)').before(paginador);
btn_fwd = $('<a>').attr({'id': 'btn_fwd', 'href': '#', 'class': 'btn'}).text('>>');
btn_rew = $('<a>').attr({'id': 'btn_rew', 'href': '#', 'class': 'btn'}).text('<<');
paginador.append(btn_rew);
paginador.append(btn_fwd); 

works:

paginador = $('<div>').attr('class', 'paginador');
$('.pagina:eq(0)').before(paginador);
btn_fwd = $(document.createElement('a')).attr({'id': 'btn_fwd', 'href': '#', 'class': 'btn'}).text('>>');
btn_rew = $(document.createElement('a')).attr({'id': 'btn_rew', 'href': '#', 'class': 'btn'}).text('<<');
paginador.append(btn_rew);
paginador.append(btn_fwd); 

sorry for not formatting the first time...

[balazs.endresz]

​http://docs.jquery.com/Core/jQuery#htmlownerDocument

"When creating single elements use the closing tag or XHTML format. For example, to create a span use $("<span/>")."

[dmethvin]

Works as documented.

[anonymous]

had the same problem, I had to use var before the variables containing DOM.

var paginador = $('<div />').attr('class', 'paginador');
$('.pagina:eq(0)').before(paginador);
var btn_fwd = $('<a/>').attr({'id': 'btn_fwd', 'href': '#', 'class': 'btn'}).text('>>');
var btn_rew = $('<a/>').attr({'id': 'btn_rew', 'href': '#', 'class': 'btn'}).text('<<');
paginador.append(btn_rew);
paginador.append(btn_fwd);