How to get the content of a non-javascript 'script'?

Question

I'm including a <script> tag in my HTML page which contains a fragment of HTML. I want to get this fragment and insert it into the page. The location of the fragment is on the same server as the page itself, so there are no cross-site issues.

<script id="frag" src="/frag.html" type="text/x-jquery-tmpl"></script>

(btw, I've specified the type of the script as text/x-jquery-tmpl as I've been trying to use jQuery templates to access the script content, even though it's just an HTML literal). I believe the value of 'type' is not a big deal.

Some things I've tried:

// Try inserting frag.html into div hdr
// this attempt, using jQuery templates, doesn't work
$('#frag').tmpl().appendTo('#hdr');

// This is an empty string
var contents = $('#frag').text();

Sorry for all the jQuery, I have even less idea of how to attempt this without it. I'm a javascript ignoramus and need the fluffy protection of jQuery at all times.

Just for curiosity, why are you inserting html in a script tag, instead of, for example, a display none div? — Ortiga
– Ortiga, Commented Apr 8, 2011 at 17:31
I'm just wondering why you would do this? Would it not be easier to just put it in a html file and retrieve that file or an element on the page? Curious about why you'd do this, that's all... — Mark Costello
– Mark Costello, Commented Apr 8, 2011 at 17:33
@Andre - it's in a different file, so not embedded in the page. — mackenir
– mackenir, Commented Apr 8, 2011 at 17:37
@mcos - Good question! I am trying to factor out markup that's common to a lot of html pages, in a system where any dynamic aspects of html pages need to be generated on the client (no server-side templating). If I had server side scripting I could generate the html parts straight into the pages. That's probably clear as mud :) — mackenir
– mackenir, Commented Apr 8, 2011 at 17:39
Hum, ok... So you need it to be loaded along with the page? That's why you don't use, for example $.get('another_page.html')? — Ortiga
– Ortiga, Commented Apr 8, 2011 at 17:41

Pointy · Accepted Answer · 2011-04-08 17:26:43Z

3

You have to use ".html()":

var contents = $('#frag').html();

Personally I think that's silly, and that ".text()" should work, but I logged a bug on the issue and the jQuery people declined to fix it.

Also, the value of the "type" attribute is in fact not a big deal, but you definitely need to set it to something, and not (of course) the actual JavaScript type.

answered Apr 8, 2011 at 17:26

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

4 Comments

Tomalak Over a year ago

Wouldn't the native innerText or textContent properties work?

Pointy Over a year ago

@Tomalak "innerText" doesn't work in IE for some reason on <script> tags.

mackenir Over a year ago

.html() only seems to work for me when the script tag is inline, rather than pointing to content using the src attribute.

Pointy Over a year ago

Ah ... OK, well that's a whole 'nother thing then. In that case I'd just fetch the code with "$.get()" or something.

FatherStorm · Accepted Answer · 2011-04-08 17:33:11Z

2

or more fully:

$(document).ready(function(){

  $('#hdr').append($('#frag').html());

});

or without the script tag at all...

    <div id='hdr'>
      //content
      <div id='hdr_add'></div>
    </div>
...

     $(document).ready(function(){
        $('#hdr_add').load('frag.html');
    });

.load() is a shortcut AJAX call that sweet and simply loads content from a give URL into the given element.

answered Apr 8, 2011 at 17:33

FatherStorm

7,1711 gold badge24 silver badges27 bronze badges

2 Comments

mackenir Over a year ago

Could be .load is the simple solution. I was hoping that putting it in a tag would ensure it got downloaded 'earlier' somehow, to maybe cut down on the appearance of the page getting 'built'. But that's pure speculation on my part.

mackenir Over a year ago

Hmm, OK. I tried it, and there's no visual impact that I can see of inserting the fragment using load. That'll teach me to speculate.

Collectives™ on Stack Overflow

How to get the content of a non-javascript 'script'?

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related