javascript - How to create a Jquery object with containing elements -

forgive me if haven't been searching in right places, however, i've been searching on internet find out how create jquery object, couldn't find solution fits needs.

there large amount of html must within object, plan append object element.

example have found: adding inner html of element string, , adding jquery object:

var htmltext = "<div id='foo1'><a class='foo2'><h1 class='foo3'></h1></a></div>" var $jqueryobject = $("<div>", {                 class: "bar",                 html: htmltext         }); 

this seems have strange effect when appended however: when appended, html left on webpage contents of jquery object. in example, <div id='foo1'><a class='foo2'><h1 class='foo3'></h1></a></div> remain (however html, head body tags still existed)

help appreciated...

thanks in advance!

edit:

i append object element so:

        $("#foobar").click(function() {             $("#objectcontainer").append($jqueryobject);          }); 

something this?

var htmltext = "<div id='foo1'><a class='foo2'><h1 class='foo3'>test</h1></a></div>";      var $jqueryobject = $("div").append(htmltext).find('.foo3').css("color","red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div></div>