2

我已经查看了使用 javascript 插入 HTML 的多种方法，包括 jQuery .prepend 和 .innerHTML ，无论我做什么，我都会得到相同的输出：

'); }

如果屏幕分辨率具有一定宽度，我正在尝试插入 HTML。这是我尝试过的两个脚本：

<script type="text/javascript" charset="utf-8" >

if (screen.width >= 500)
{
$('#stemanimation_hype_container').prepend('<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608></script>');

}
</script>

<div id="stemanimation_hype_container" style="position:relative;overflow:hidden;width:900px;height:300px;">
</div>

另一个：

<script type="text/javascript" charset="utf-8" >

if (screen.width >= 500)
{
document.getElementById("stemanimation_hype_container").innerHTML='<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608'></script>";

}

</script>
<div id="stemanimation_hype_container" style="position:relative;overflow:hidden;width:900px;height:300px;">
</div>

知道会发生什么吗？我在只有 jquery 而没有其他脚本的页面上对此进行测试，以确保没有冲突。谢谢你能给我的任何帮助！

4

8 回答 8

6

您在定义要插入的 html 的字符串中有错误

'<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608'></script>";

应该：

'<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608"></script>';
于 2012-09-07T18:20:26.890 回答
1

您的原始代码很好，但是这个错误：

..._script.js?58608"></script>');
                // ^ Forgot a "

或者，我可能会建议使用document.createElement并将其附加到容器中：

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '..._script.js?58608';
document.getElementById('stemanimation_hype_container').appendChild(script);

或者，jQuery 方式：

$('<script>',{
  'type' : 'text/javascript',
  'src' : '..._script.js?58608'
}).appendTo('#stemanimation_hype_container');

（注意我...在代码中使用是为了简洁，而不是准确）

于 2012-09-07T18:24:01.157 回答
1

您的第一个代码块缺少"后?58608

您的第二个代码块有一个after'应该有的地方，反之亦然。"?58608

尝试

$('#stemanimation_hype_container').prepend('<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608"></script>');
于 2012-09-07T18:21:29.353 回答
0

You need to put the script block at the end of your HTML. Right now, you are looking for $('#stemanimation_hype_container') before that div has been inserted into the DOM, and so it doesn't exist when the JS is run. That's why nothing happens.

于 2012-09-07T20:21:05.040 回答
0

如果您发布的代码是您正在尝试的实际代码，那么您在 jq 示例中有一个不匹配的双引号，而在另一个版本中有一个双引号。

于 2012-09-07T18:22:37.717 回答
0

在这两个示例中，我都看到 src 属性中引号的使用不一致。您以双引号开头，但以单引号结尾。尝试用双引号结束它。

于 2012-09-07T18:31:10.143 回答
0

我想让它正常工作的问题实际上是与 Tumult Hype 的 CSS3 动画脚本的严重冲突。代码示例，除了我关于双引号的错字之外，实际上对于大多数应用程序都是正确的。

于 2013-02-01T02:01:50.163 回答
0

你有没有试过这个：

$('#stemanimation_hype_container').html('<script type="text/javascript" charset="utf-8" src="STEM%20Animation_Resources/stemanimation_hype_generated_script.js?58608"></script>');
于 2012-09-07T18:20:20.127 回答