script
DOMDocument
HTML,CSS

HTMLElementの中でScriptタグを追加し、実行する

More than 1 year has passed since last update.

まず、以下の例を見てみます。

<html>
  <body onload="document.getElementById('loader').innerHTML       = '<script>alert(\'hi\')<\/script>'">
   <div id="loader"></div>
  </body>
</html>

DIVの中でScriptタグを追加し、実行しますが、動きません。
この記事はDIVの中でScriptタグを使える方法を説明します。

1。innerHTMLを使えない

上記の例の動かない原因はinnerHTML でDIVのHTMLコンテンツが新HTMLStringを変わります。しかし、<script>タグはHTMLコンテンツではないで、DOM Elementです。それで、 使うために、<script>HTMLStringDOM Elementを変更することが必要です。

2。Jqueryを使う

HTMLStringはDOM Elementを変更することに対して、Jqueryを使うことは一番簡単な方ほだと思います。

<html>
  <script src="https://code.jquery.com/jquery-     2.2.2.min.js"></script>
  <body onload="$('#loader').html('<script>alert(\'hi\') <\/script>')">
   <div id="loader"></div>
  </body>
</html>

*append, replaceWith, appendChild,...*も使えます。

3。JavaScriptを使う

他のJavaScriptも使えます。

var script=document.createElement('script');
script.innerHTML = "alert('ok')"
var div=document.getElementById('test');
div.appendChild(script)