面白きことは良きことなり

拙く未熟なiOSエンジニアの備忘録と戯言

JavaScriptでTextBoxに入力された内容からリンクを生成

JavaScript 備忘録

仕事でURLSchemeのテストをする際、
TextBoxに入力された値からリンクを生成したかったので調べて作ったのを記載。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <header>
    </header>
    <body>
    <form name="form1" id="id_form1" action="">
        <input name="textBox1" id="id_textBox1" type="text" value="" placeholder="文字列入力"/ size="45">
        <input type="button" value="リンク生成" onclick="onButtonClick();" />
    </form>
    <div id="link"></div>
    <script type="text/javascript" language="javascript">
    function onButtonClick() {
        var object = document.getElementById('link');
        var tag = document.createElement('a');
        tag.setAttribute('href','http://'+document.forms.id_form1.id_textBox1.value);
        tag.appendChild(document.createTextNode('リンク'));
        // 生成するたびにリンクが増えるのを防ぐため削除
        if (object.childNodes.item(0)) {
            object.removeChild(object.childNodes.item(0));
        }
        object.appendChild(tag);
    }
    </script>
    </body>
</html>