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

Question

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?

Answer 1

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