Insert code snippet to div

Question

I used Jquery to insert a variable to div. Please check my code.

var msg = '<script src="https://gist.github.com/3010234.js?file=new.html.erb"></script>'
$('.result').html(msg);

msg variable contains a script that render a code snippet. msg is dynamic variable.

The above code is not working to insert code snippet to div.

Any Idea?

This script generate code snippet like this.

enter image description here

How are you calling the code? Document ready? – BryanH Jul 05 '12 at 06:32 — BryanH, Jul 05 '12 at 06:32
why are u adding `script` inside `div`??? – Kshitij Jul 05 '12 at 06:34 — Kshitij, Jul 05 '12 at 06:34
What is your purpose, execute a script or just display it? – James Jul 05 '12 at 06:43 — James, Jul 05 '12 at 06:43

Blaster · Accepted Answer · 2012-07-05T07:21:15.400

3

To add script, I would add it to head like this;

var s = document.createElement('script');
s.src = 'https://gist.github.com/3010234.js?file=new.html.erb';
s.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(s);

edited Jul 05 '12 at 07:21

answered Jul 05 '12 at 06:36

Blaster

9,414
1
29
25

Not in this case. Adding a script to the head that outputs display code won't work, will it? – BryanH Jul 05 '12 at 06:53
@BryanH: I know, just posted a common approach. Though in that case `document.getElementById('id')` would do that trick :) – Blaster Jul 05 '12 at 06:54
`var script = document.createElement("script"); script.src = "https://gist.github.com/3010234.js?file=new.html.erb"; script.type = "text/javascript"; document.getElementById('aaa').appendChild(script);`. This code inserted script. but not render any code snippet. – Shamith c Jul 05 '12 at 07:20
1

@Shamithc: Since it is dynamically added, it will not be visible when you view Souce Code option from browser. – Blaster Jul 05 '12 at 07:22

score 1 · Answer 2 · edited Jun 29 '21 at 23:56

1

function loadScript() {
    var script = document.createElement("script");
    script.src = "https://gist.github.com/3010234.js?file=new.html.erb";
    script.type = "text/javascript";
    document.getElementById("result").appendChild(script);
}

edited Jun 29 '21 at 23:56

TheBotlyNoob

369
5
16

answered Jul 05 '12 at 06:37

Talha

18,898
8
49
66

1

There is no element with `result` as tag name in html :) – Blaster Jul 05 '12 at 06:38
@Blaster yeh you are right, i updated. its better to include this in head tag – Talha Jul 05 '12 at 06:45
1

Change `getElementsByID` to `getElementById` :) – Blaster Jul 05 '12 at 06:47
Since the OP is using jQuery, why not stick with it? jQuery's selectors are much easier (and safer) than `getElementById`. – BryanH Jul 05 '12 at 06:52
@BryanH its easy, agreed. But how u can say that its more safer? – Talha Jul 05 '12 at 06:53

gilly3 · Answer 3 · 2012-07-05T22:15:28.330

1

You cannot load a github gist into a page dynamically using that embed code. The embed code is fine if you can add the script tag to the HTML, but to do it dynamically via JavaScript as you are trying to do, it won't work because it relies on document.write().

Instead, use the github gists api:

$.get("https://api.github.com/gists/3010234", function(response) {
    $(".result").text(response.data.files["new.html.erb"].content);
}, "jsonp");

Working demo: http://jsfiddle.net/naTqe/

edited Jul 05 '12 at 22:15

answered Jul 05 '12 at 06:39

gilly3

87,962
25
144
176

As seen in [another SO question](http://stackoverflow.com/questions/236073/why-split-the-script-tag-when-writing-it-with-document-write/236106#236106). – BryanH Jul 05 '12 at 07:14
`$.getScript("https://gist.github.com/3010234.js?file=new.html.erb"); ` is working. But I am not able to render code snippet generated by script into the div. – Shamith c Jul 05 '12 at 07:23
@Shamithc - The script your are trying to load uses `document.write()`, which you shouldn't use after the document has finished loading. – gilly3 Jul 05 '12 at 21:54
@Shamithc - I've abandoned [my earlier answer](http://stackoverflow.com/revisions/11338983/2), because, while technically accurate, it addresses a red herring and gets you no closer to accomplishing your *actual* goal of loading a github gist into a page dynamically using JavaScript. See my new answer above for a workable solution. – gilly3 Jul 05 '12 at 22:21
Yes, You are correct. But I missed gist styling, I need to generate code from that script itself. You are tried to get content only. – Shamith c Jul 06 '12 at 04:37

BryanH · Answer 4 · 2012-07-05T07:14:20.283

It looks like your remote JS is buggy. I ran it through JS Lint and came up with several errors.

Anyway, here is my working example. Keep a javascript console open and you'll see the error when it tries to parse the remote JS.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script type="text/javascript" src=
  "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <title>Jquery test</title>
</head>

<body>
  <h1>jQuery</h1>

  <p class="result">Some result</p>
  <script>
  /*<![CDATA[*/
  $(document).ready(function(){
  var msg = '<script type="text/javascript" src="http://gist.github.com/3010234.js?file=new.html.erb"><\/script>";
  $('.result').html(msg);
  });
  /*]]>*/
  </script>
</body>
</html>

Insert code snippet to div

4 Answers4