306

I am creating an element with document.createElement(). Now how can I pass it to a function that only takes a Jquery object?

$("#id") 

I can not use it, as the element has not been rendered in the page yet.

GEOCHET
  • 20,745
  • 15
  • 72
  • 98
Tanmoy
  • 42,038
  • 14
  • 43
  • 54

3 Answers3

502
var elm = document.createElement("div");
var jelm = $(elm);//convert to jQuery Element
var htmlElm = jelm[0];//convert to HTML Element
Marius
  • 55,927
  • 31
  • 124
  • 146
17

What about constructing the element using jQuery? e.g.

$("<div></div>")

creates a new div element, ready to be added to the page. Can be shortened further to

$("<div>")

then you can chain on commands that you need, set up event handlers and append it to the DOM. For example

$('<div id="myid">Div Content</div>')
    .bind('click', function(e) { /* event handler here */ })
    .appendTo('#myOtherDiv');
Russ Cam
  • 121,250
  • 30
  • 197
  • 258
3

So far best solution that I've made:

function convertHtmlToJQueryObject(html){
    var htmlDOMObject = new DOMParser().parseFromString(html, "text/html");
    return $(htmlDOMObject.documentElement);
}