Dynamically create elements from unrendered code using jquery and/or 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?

Todd Yandell · Accepted Answer · 2012-08-19 19:44:52Z

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

answered Aug 19, 2012 at 19:44

Todd Yandell

14.7k2 gold badges52 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

complex857 · Accepted Answer · 2012-08-19 19:41:56Z

1

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.

answered Aug 19, 2012 at 19:41

complex857

20.9k6 gold badges54 silver badges56 bronze badges

4 Comments

CoreyRS Over a year ago

I've tried the css option but I still want to create it on the fly rather than just revealing it to improve performance even further. As for the js solution, saving it as one long string i saw mentioned in another post but readability is terrible, and encasing each and every line in '' followed by a + sign is just... I'd rather not.

complex857 Over a year ago

Sound like using some template solution could help improve readability, however i'm not sure if it would be any faster, than just having the html in place, if you don't have to modifiy it too much. Browsers are pretty good at parsing html, chrome's performance tab or dynatrace should help you measure it.

CoreyRS Over a year ago

desktop browsers are fine and mobile browsers like safari and chrome can work ok since they include fast javascript engines, but given the fact I'm creating a hybrid app, iOS's native browser for example doesn't include the javscript nitro engine and also, which is the main cause of me needing to find a solution, greatly reduces in performance when the are numerous form inputs on a page, so I have to find the fastest possible js method of creating elements only when needed. Even hiding inputs and entire forms reduces performance because they are still within the DOM. I despise apple greatly.

complex857 Over a year ago

If i recall correctly the .innerHTML was a performance hack on the dom's createElement, also in my experience fast code seldom pretty. Just find some way to measure it, because if you don't measure it you can't brag about it (-:

Collectives™ on Stack Overflow

Dynamically create elements from unrendered code using jquery and/or php

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related