How can I convert a DOM element to a jQuery element?

Question

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.

Huebner

This quesion should be awarded as the best question in stackoverflow – Delia

Answer 1

var elm = document.createElement("div");
var jelm = $(elm);//convert to jQuery Element
var htmlElm = jelm[0];//convert to HTML Element

Canner

This works because jquery will take not only a string selector, but an existing jquery object, or any valid dom object as an argument to the main $() query function. – Rottenstone

What about the reverse? You have a jquery element and want to convert it to a dom element? – Longrange

The reverse can be done by: johnjianfang.blogspot.com/2009/04/… – Longrange

Hey @Canner will this work if elm contains a collection of DOM nodes? – Scratches

I'm getting this error... gist.github.com/CrazyPython/365615598342b220dc5735235682f0e3 – Standice

@Scratches yes – Bedchamber

Answer 2

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');

Richelieu

actually i am getting the element from somewhere where i cant change the code – Huebner

Answer 3

So far best solution that I've made:

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

Fullmer