2017/06/24

HTMLを動的に書き換えよう

前回はAjaxでデータを動的に取得してテキストボックスに内容を入れてみました。
今回はHTML自体を書き換えてみたいと思います。

それではコードです。

innerhtml.html

<!DOCTYPE html>

<html>
    <head>
        <script type="text/javascript">
            function update1(){
                document.getElementById("div1").innerText=
                    "<B>" + document.getElementById("textbox1").value + "</B><br />";
            }
            function update2(){
                document.getElementById("div2").innerHTML=
                    "<B>" + document.getElementById("textbox2").value + "</B><br />";
            }
        </script>
    </head>
    <body>
        <form id="form1" >
            <input type="text" id="textbox1" value="text">
            <button type="button" onclick="update1();">追加</button>
        </form>
        <div id="div1">ここに表示されます</div>
        <form id="form2" >
            <input type="text" id="textbox2" value="text">
            <button type="button" onclick="update2();">追加</button>
        </form>
        <div id="div2">ここに表示されます</div>
    </body>
</html>
これを保存しておきます。
アクセスしてみます。
それぞれのテキストボックスに入力して、ボタンを押します。


それぞれ書き換わりました。

今回のポイント

  • 「innerText」と「.innerHTML」
    この二つに文字列を設定するとそれぞれの要素の内容が書き換わる。
    ただし、「.innerText」は要素の中のテキストだけなので、
    htmlタグを埋めてもそのまま文字列として処理する。
    (きっと内部的にエスケープ処理をしているんだろうな・・・。)
ご参考まで。
時刻:
ラベル: , , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)

AWSに手を出してフレームワークも使ってみたが・・・。

サイトを作り直しました。 AWS上に構築した Content created by AXY を作り直しました。 具体的にはbottle.pyを使ったpythonで構築したサイトからPHP7を使用したサイトに再構築しています。 特別何か問題点があったというわけで...

  • HTML5とJavascriptとPythonでファイルをアップロードしてみた。
    前回 HTML5とJavascriptとファイルビュアーを作ってみた。 で ローカル上にあるファイルの表示をしてみました。 今回はそのファイルをサーバーにアップロードして、アップロード先のURLを返してもらう ファイルアップローダーを作ってみようと思います。 ...
  • SVGで印鑑作ってみた。
    SVGで印鑑ポイ画像ツール を公開してから一か月ぐらいたってしましました。 本体はこちら Seal editer made with SVG です。 そろそろ何を作ったのか解説したいところです。 それでは本編です。