javascript - HTML要素追加 - liguofeng29’s blog

HTML要素を追加する手順

1 node生成 OR node複製

document.createElement(Tag)

<script type="text/javascript">
   // divタグ生成
   var div1 = document.createElement("div");
</script>

Node colneNode(boolean deep)
- deep : 対象node以降をクローンするか

<script type="text/javascript">
    // IDで要素取得
    var ul = document.getElementById("ul");
    // 複製
    var ajax = ul.firstChild.nextSibling.cloneNode(false);
    // innerHTML設定
    ajax.innerHTML = "新規子要素";
    // 子要素として追加
    ul.appendChild(ajax);
</script>

2 node追加

appendChild(Node newNode)
insertBefore(Node newNode, Node refNode)
replaceChild(Node newChild, Node oldChild)
HTMLSelectElement, HTMLTableElementなど特殊な要素は別途追加方法を提供している

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> insertChild </title>
</head>
<body>
    <ul id = "li1">
        <li>要素1</li>
    </ul>
    <script type="text/javascript">
       // IDで要素取得
       var ul = document.getElementById("li1");
       // node複製
       var ajax = ul.firstChild.nextSibling.cloneNode(false);
       // innerHTML設定
       ajax.innerHTML = "要素2";
       // 追加
       ul.insertBefore(ajax , ul.firstChild);
   </script>
</body>
</html>

HTMLSelectElementに要素追加

HTMLSelectElement.add(HTMLOptionElement option, HTMLOptionElement before)
- beforeがnullの場合、最後に追加

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
    <title> HTMLSelectElementに要素追加</title>
</head>

<body id="test">
    <script type="text/javascript">
        // select要素生成
        var a = document.createElement("select");
        // option追加
        for (var i = 0; i < 10; i++) {
            // option要素生成
            var op = document.createElement("option");
            op.innerHTML = 'option' + i;
            // 最後に追加
            a.add(op, null);
        }
        a.size = 10;
        // bodyに追加
        document.getElementById("test").appendChild(a);
    </script>
</body>

</html>

HTMLSelectElement.options[index] = new Option(text, value, defalutSelect, selected)

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
    <title> HTMLSelectElementに要素追加2</title>
</head>

<body id="test">
    <script type="text/javascript">
        // select要素生成
        var a = document.createElement("select");
        // option追加
        for (var i = 0; i < 10; i++) {
            // option生成
            var op = new Option('option' + i, i);
            // 追加
            a.options[i] = op;
        }
        a.size = 10;
        // // bodyに追加
        document.getElementById("test").appendChild(a);
    </script>
</body>

</html>

f:id:liguofeng29:20160208165740p:plain

HTMLTableElementに要素追加

HTMLTableElementのメソッド
- insertRow(index)
- createCaption()
- createTFoot()
- createTHead()
HTMLTableRowElementのメソッド
- insertCell(index)

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
    <title> HTMLTableElementに要素追加</title>
</head>

<body id="test">
    <script type="text/javascript">
        // table要素生成
        var a = document.createElement("table");
        // CSS
        a.border = 1;
        // タイトル生成
        var caption = a.createCaption();
        caption.innerHTML = "タイトル名だよ";
        for (var i = 0; i < 5; i++) {
            // 行追加
            var tr = a.insertRow(i);
            for (var j = 0; j < 7; j++) {
                // セル追加
                var td = tr.insertCell(j);
                // セル内容
                td.innerHTML = "セル " + i + j;
            }
        }
        // bodyに追加
        document.getElementById("test").appendChild(a);
    </script>
</body>

</html>

f:id:liguofeng29:20160208170737p:plain