使用jquery和/或php从未呈现的代码动态创建元素

I want to store html that isn't to be rendered until needed either within a tag that can hold raw html code without rendering it on page load or store it within a php or jquery variable for later use. I then want to be able to insert the html into the DOM on button click and have it render.

I've tried storing it within an xmp tag as that can store html code with the < and > characters without using character codes for them, but when trying to insert it into the DOM, the updated source shows it had been copied but it wouldn't render on screen. Also tried storing it within a code tag, which worked on a desktop browser but not in mobile safari. Since this is a webapp mobile browser compatibility is important.

Anyone know of a good method of doing this?

Try <script> tags with a type of text/plain or text/html:

<script type="text/plain" id="example">
  <div class="example">
    <h2>Hello</h2>
    <p>World</p>
  </div>
</script>

$(".button").click(function () {
  var html = $("#example").text();
  $("#destination").html(html);
});

It depends on where do you want to generate the content in question. If it's easier for you setup to generate it on the server side, you can use css to hide those parts (like display:none) and just remove the css property or grab the nodes with javascript and put them elsewhere with something like this:

$('.target').html($('.hidden_node').html());

If you want to generate the content on the js side, you can build it as a long string and just shove it into the target, or you can use jquery's node generation syntax like:

 $('<div />').attr({
   class: 'test'
 }).appendTo("body");

Or you can use one of the various javascript templating solutions like mustache or handlebars.