What are modern uses of script type="text/html" and is this example considered good use?

Is something like...

<script type="text/html" id="this-content1">
<h1>This Header Info One</h1>
<p>This content one. . .</p>
</script>
<script type="text/html" id="this-content2">
<h1>This Header Info Two</h1>
<p>This content two. . .</p>
</script>

...and using jQuery to swap out the content based on a selector good practice in today's standards?

I am just getting into the use of script type="text/html"... to allow dynamic changes of my content and am finding many ways to do this. Is there a source that might explain the direction this is going and if any standardizing of this practice.

I see code like...

<div class="thumbnail">
            <# if ( data.uploading ) { #>
                <div class="media-progress-bar"><div></div></div>
            <# } else if ( 'image' === data.type ) { #>
                <img src="{{ data.size.url }}" draggable="false" />
            <# } else { #>
                <img src="{{ data.icon }}" class="icon" draggable="false" />
            <# } #>
        </div>

...nested in a script type="text/html" tag and really have no idea why it is written this way. Also have just wet my beak in backbone and this looks to be a little heavy if just looking to add content swapping in one page.

Answers


According to the HTML5 spec for the script tag, it's totally fine to use <script> with a type attribute set to any valid MIME type. That includes MIME types like text/html or text/plain.

According to the HTML4 spec for the script tag, it's not quite fine:

"There are two types of scripts authors may attach to an HTML document: Those that are executed one time when the document is loaded [and t]hose that are executed every time a specific event occurs"

You don't need backbone for templating. You can use e.g. jQuery or my personal favorite, Mustache.js.


I'm assuming you want to save a portion of HTML to use later. Putting non-script data in a script tag does not make sense. Do what Facebook does!

<code class="hide" id="code1"><!--
  <p>My HTML here</p>
  <script>My Javascript here</script>
--></code>

Then you can grab the HTML later and do whatever you want later:

var html = document.querySelector('#code1').innerText.slice(5, -5)

The scripts inside won't be executed until you handle them properly.

Some notes:

  • No idea what the differences between innerText and other text functions are
  • I don't think you can just insert script tags into the DOM. Not sure how jQuery does it

Need Your Help

django days-of-week representation in model

django django-models model days

I have this "Jobs Server" model that i'm building. I want to include a field that will save which days of the week this job will run on. Ultimately in the UI, i would like the user to be able to ...

What is recommended way for spawning threads from a servlet in Tomcat

java multithreading tomcat servlets spring-mvc

Probably a repeat! I am using Tomcat as my server and want to know what is best way to spawn threads in the servlet with deterministic outcomes. I am running some long running updates from a servlet