JQuery: Build HTML in 'memory' rather than DOM

Question

Is there a way to \'pre-build\' a snippet of HTML before adding it to the DOM?

For example:

$mysnippet.append(\"
hello
\");
$mysni         


        

Answer 1

You can prebuild it and also attach events, as well as data attributes, inner html, etc, etc.

var eltProps = {
    css: {
        border: 1,
        "background-color": "red",
        padding: "5px"
    },
    class: "bblock",
    id: "bb_1",
    html: "<span>jQuery</span>",
    data: {
        name: "normal-div",
        role: "building-block"
    },
    click: function() {
         alert("I was clicked. My id is" + $(this).attr("id"));
    }
};

var elt = $("<div/>", eltProps);

$("body").append(elt);