jquery append script to html element dynamically

Question

I need to dynamically add more items (videos. which is in script form) to div. In below code, append doesn't do anything. I have tried to append script in string form too (i.e. ""). I appreciate any help!!!!

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <div>
      <script type="text/javascript" src="http://video.foxnews.com/v/embed.js?id=1993203907001&w=466&h=263"></script>
  </div>

<script>
$(document).ready(function() {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'http://video.foxnews.com/v/embed.js?id=1993203907001&w=466&h=263';
  $("div").append(script);
});
</script>

</body>
</html>

usually I always ad an id to a div like
and then use $("mydiv").append(script) — Terradon, Nov 27 '12 at 23:52
@Terradon - it shouldn't make any difference. anyways I also do that In my code :) — user1858168, Nov 28 '12 at 00:05
It has to do with the way you're defining your `var script`. I would suggest attempting to append the html script tag as a string, and share your results here. — crowjonah, Nov 28 '12 at 00:08
Is this your real script?? because you add the same video you already have in your div?? — Terradon, Nov 28 '12 at 00:09
ideally I pull down new video dynamically and add it. this is to keep it simple. — user1858168, Nov 28 '12 at 00:26

score 1 · Answer 1 · answered Nov 27 '12 at 23:53

1

Unsafe JavaScript attempt to access frame with URL file:///C:/Users/###/Desktop/test.html from frame with URL http://video.foxnews.com/v/video-embed.html?video_id=1993203907001&w=466&h=263&loc=. Domains, protocols and ports must match.

Your trying to access something from a different domain => XSS

http://en.wikipedia.org/wiki/Cross-site_scripting

and also

https://support.ookla.com/entries/21097566-what-is-crossdomain-xml-and-why-do-i-need-it

answered Nov 27 '12 at 23:53

pensan

420
8
11

thanks for respond. If you copy/paste my code in notepad and save as .html, you will see that it can embed video. but ideally it should have two videos. – user1858168 Nov 28 '12 at 00:28

score 1 · Answer 2 · edited May 23 '17 at 12:27

1

jQuery handles <script /> tags in a special way (.append() -> .domManip())
Just use the DOM method .appendChild() instead

document.getElementsByTagName('div')[0].appendChild(script);

Read this answer for a deeper look into the why?

edited May 23 '17 at 12:27

Community

1
1

answered Nov 27 '12 at 23:57

Andreas

21,535
7
47
56

score -1 · Answer 3 · answered Nov 27 '12 at 23:52

-1

Try replacing this line

$("div").append(script);

with this

document.getElementsByTagName('div')[0].appendChild(script);

Check Fiddle

The native .appendChild method seems to be working , but the jQuery .append() does not seem to be working for some reason..

answered Nov 27 '12 at 23:52

Sushanth --

55,259
9
66
105

@YuryTarabanko Why you think its irrelevant? It addresses the problem (just missing an explanation) – Andreas Nov 28 '12 at 00:00
@Sushanth - It doesn't address the problem. are you able to see video in fiddle? it should embed video if it works. – user1858168 Nov 28 '12 at 00:03
I think that is another issue for which answer given by pensan might be in the right direction... – Sushanth -- Nov 28 '12 at 00:12
@Sushanth: It doesn't. jQuery handles scripts correctly. Check network tab just to make sure that script was actually loaded. Your solution adds nothing. – Yury Tarabanko Nov 28 '12 at 01:01

jquery append script to html element dynamically

3 Answers3