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 件のコメント:

コメントを投稿

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

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