38

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.

Andrew
  • 18,680
  • 13
  • 103
  • 118
Shane
  • 1,629
  • 3
  • 23
  • 50
  • 4
    you are intentionally mislabeling something as executable code that you know very well isn't and asking if this is a good thing to do? – Dmitry B. Dec 14 '12 at 17:35
  • In HTML5 script tags need no type attribute. – j08691 Dec 14 '12 at 17:36
  • 28
    @j08691: They do if they don't contain JavaScript. – T.J. Crowder Dec 14 '12 at 17:38
  • 6
    This is quite common for templates in certain frameworks or libraries, like knockout.js http://knockoutjs.com/documentation/template-binding.html#note-1-rendering-a-named-template – xec Aug 28 '14 at 12:07
  • 1
    I honestly do not think that any of the answers as of 2022/07/28 actually answer the question. And I do not want to open a new question and be blamed for making a duplicate. I want to see examples of how 'script type="text/html"' is used today. I want to know why it makes sense to write a script of type html since I could just write it in type javascript. Why make a script of type text/html ? What use would that be since html itself could not access what is in that script???? – Joshua Robison Jul 28 '22 at 03:08

3 Answers3

24

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.

wprl
  • 24,489
  • 11
  • 55
  • 70
  • 1
    I have been looking at Mustache and handlebars a bit and will a bit more now that you mentioned it. Based on your answer, it sounds like this is a modern way of performing this type of task. Maybe why Facebook does not as @JonathanOng has stated, considering Facebook does not like HTML5 yet. – Shane Dec 14 '12 at 21:45
2

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
Jonathan Ong
  • 19,927
  • 17
  • 79
  • 118
  • 2
    It should be clarified the real reason facebook does this: https://www.facebook.com/note.php?note_id=389414033919 – anthony sottile Dec 14 '12 at 22:28
  • Thank you, I just came back to this post and for whatever reason this gave me a few ideas. Either way, we are turning off the html interpreter to data we want to hide. I am surprised there is not a standard for doing so. – Shane Jun 30 '13 at 20:44
  • 1
    You can insert script tags with no problem, and actually jQuery has code to actively prevent this (in functions like `.load()`) as a security measure. – Arturo Torres Sánchez May 24 '15 at 20:24
  • it's fairly common to inject scripts into the dom, but the process is usually done via XmlHttpRequest object. Infact, the ScriptManager object for asp.net webforms 'partial page postbacks' utilizes the mechanism to ajaxify server controls. – Brett Caswell Oct 26 '15 at 13:48
2

This is simply intended to embed data directly to HTML with some sever-side rendering

According to Mozilla - You can also use the attribute to embed data in HTML with server-side rendering by specifying a valid non-JavaScript MIME type in the type attribute. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Example :

<!-- Generated by the server -->
<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script>

<!-- Static -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>
NJENGAH
  • 955
  • 15
  • 12