jQuery Adding DOM Elements

Question

This may be a simple answer, but I'm trying to add a dom-created element (i.e. document.createElement(...)) to a jQuery Selector.

jQuery has a great assortment of functions for adding html

• .html(htmlString)
• .append(htmlString)
• .prepend(htmlString)

But what i want to do is add a dom OBJECT

var myFancyDiv = document.createElement("div");
myFancyDiv.setAttribute("id", "FancyDiv");

// This is the theoretical function im looking for.
$("#SomeOtherDiv").htmlDom(myFancyDiv); 

Answer 1

Try this:

$("#SomeOtherDiv").append($(myFancyDiv)); 

Wrapping the DOM element in $(...), I'd expect you could add it with any of the jQuery DOM manipulation functions that take a jQuery element collection.

Answer 2

This should do it !

  $("#SomeOtherDiv").append('<div id="FancyDiv"></div>')); 

Answer 3

This will work in jQuery 1.4

$("<div/>",{
    id: 'FancyDiv'
}).appendTo("#SomeOtherDiv");

http://api.jquery.com/jQuery/#jQuery2

Answer 4

You could make things simpler and faster by cutting out jQuery entirely for something this simple:

document.getElementById("SomeOtherDiv").appendChild(fancyDiv);