javascriptで取得した変数の値をHTMLで扱う方法について

Question

###前提・実現したいこと
基本的なことで申し訳ないのですが、
タイトルにも書いてあるように、javascriptで得た変数を<script>の外であるHTMLで扱う場合、どういった表記をすればいいのでしょうか？

下記にあるjavascriptで得たtest_tableを、htmlの2行目の「テスト」の部分に入れたいです。

###該当のソースコード

//省略
var test_table="";
      test_table+="<table>";

      for (var i = 0; i < 100; i++) {
        test_table+=
        "<tr><td>"+
        (i+1)+
        "</td><td>"+
        rows1[i]+
        "</td></tr>";
      }
      test_table+="</table>";
//省略

  <div id="con1" class="modal-content">
          <p>テスト</p>
          <p><a class="modal-close">閉じる</a></p></div>
           <a data-target="con1" class="modal-open">リンク</a>

Answer 1

セキュリティ的な観点から補足します。
既に二人の方から回答があるように、innerHTMLやdocument.writeを用いて機能を実現することができますが、表示する文字列が信頼できない場合、DOM based XSSという一種のクロスサイトスクリプティング脆弱性が混入する可能性があります。そもそも、表示文字列が信頼できる・できないに関わらず、エスケープ処理などを行うべきものです。
詳しくは、IPAから出ている『DOM Based XSS』に関するレポートを参照ください。

Answer 2

・簡単にできるのは、document.writeを使う方法でしょうか

<div id="con1" class="modal-content">
    <p>テスト
        <script type="text/javascript" language="javascript">
        <!--
            document.open();
            document.write(table_test);
            document.close();
        // -->
        </script>
    </p>
    <p><a class="modal-close">閉じる</a></p></div>
    <a data-target="con1" class="modal-open">リンク</a>

・element.innerHTMLも使うことができると思います。
まず、追加したいHTMLの要素にIDをつけます。
以下の例ではtest-tableとつけています。

<div id="con1" class="modal-content">
    <p id="test-table">テスト</p>
    <p><a class="modal-close">閉じる</a></p></div>
    <a data-target="con1" class="modal-open">リンク</a>

次に、JavaScriptで以下のように書きます

var element = document.getElementById('test-table');
element.innerHTML = test_table;

Comments

[sdnco]

とてもわかりやすい説明ありがとうございます！
前者の方でやってみたら出来ました。

Answer 3

rows1の内容がどのくらい信用できるか、そこにHTMLタグを許すべきかどうかに依りますが…。

<div id="con1" class="modal-content">
    <div id="test-table-wrapper"></div>
    <p><a class="modal-close">閉じる</a></p></div>
    <a data-target="con1" class="modal-open">リンク</a>

idをここではtest-table-wrapperとしました。

var tbl = document.createElement("table");

for(var i = 0; i < 100; i++) {
    var tr = document.createElement("tr");

    var th = document.createElement("th");
    th.appendChild(document.createTextNode(i + 1));
    tr.appendChild(th);

    var td = document.createElement("td");
    td.appendChild(document.createTextNode(rows1[i]));
    tr.appendChild(td);

    tbl.appendChild(tr);
}

document.getElementById("test-table-wrapper").appendChild(tbl);

HTMLの方にidを設定することがどうしても出来ないということであれば、document.currentScript などを使う手もあります。ただIEなど対応していないブラウザもあるので現時点（2016年12月）ではまだおすすめできないといったところでしょうか。

ちなみに document.write は HTML5 では非推奨になっています。また innerHTML を使いたければ、徳丸先生（ockeghem）が仰っているとおり、DOM based XSS を考慮することが大前提かと。

Answer 4

document.write("表示する文字列")
で出力できます。

詳しくはこのHPを参考にしてください。

Comments

[sdnco]

回答ありがとうございます！解決しました。