2

jQuery .prepend と .innerHTML の両方を使用して、javascript で HTML を挿入する複数の方法を見てきましたが、何をしても同じ出力が得られます。

'); }

画面解像度が特定の幅の場合、HTML を挿入しようとしています。これらは私が試した2つのスクリプトです：

<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

"コードの最初のブロックにafterがありません?58608

コードの 2 番目のブロックには、 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 に答える
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 に答える
0

これを正しく機能させるための私の問題は、実際には、CSS3アニメーション用のTumultHypeのスクリプトとの厄介な競合でした。二重引用符に関する私のタイプミスを除いて、コード例は実際にはほとんどのアプリケーションで正しいです。

于 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 に答える
0

投稿したコードが実際に試しているコードである場合、jq の例では一致しない二重引用符があり、他のバージョンでは二重引用符が単一を閉じています。

于 2012-09-07T18:22:37.717 に答える
0

HTML の最後にスクリプト ブロックを配置する必要があります。現在、div が DOM に挿入される前に $('#stemanimation_hype_container') を探しているため、JS の実行時には存在しません。だから何も起こらない。

于 2012-09-07T20:21:05.040 に答える
0

どちらの例でも、src 属性の引用符の使用に一貫性がありません。二重引用符で始まり、一重引用符で終わっています。二重引用符で終わらせてみてください。

于 2012-09-07T18:31:10.143 に答える