jQuery - DOMのnode関連操作 - liguofeng29’s blog

jQueryは、node生成、削除、追加、複製などができる。

DOMのnode操作関連メソッド

生成

$("<a></a>")

$("<a></a>", {
  href: "xxxx.html",
  target: "_blank",
  "class": "myClass"
});

// 1.8から？
$("<div></div>", {
  width: 100,
  height: 100,
  css: {border: "5px solid gray"},
  addClass: "my-div",
  on: {
    click: function(event) {
      // イベント設定
    }
  }
});

node内部に追加
- append(content) : contentはhtml文字列,DOM,jQeuryオブジェクト。
- append(fn(index))
- appendTo(selector) : selectorの後に追加
- prepend(content)
- prepend(fn(index, html))
- prependTo(selector) : selectorの前に追加

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> jQueryのnode追加 </title>
    <style type="text/css">
    table {
        border: 1px solid #000;
        /*height: 200px;*/
        width: 400px;
    }
    
    td {
        border: 1px solid #000;
    }
    
    .append1 {
        color: red;
    }
    
    .append2 {
        color: blue;
    }
    
    .prepend1 {
        color: yellow;
    }
    
    .prepend2 {
        color: black;
    }
    </style>

</head>

<body>
    <input type="button" class="append1" value="append(content)" onclick="append1();">
    <input type="button" class="append2" value="append(fn(index))" onclick="append2();">
    <input type="button" class="prepend1" value="prepend(content))" onclick="prepend1();">
    <input type="button" class="prepend2" value="prepend(fn(index))" onclick="prepend2();">
    <table id="table1">
    </table>
    <script type="text/javascript" src="jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript">
    function append1() {
        var tr1 = $("<tr class='append1'><td>append(content)</td></tr>");
        $("#table1").append(tr1);
    }

    function append2() {
        $("#table1").append(function(index) {
            return "<tr><td class='append2'>append(fn(index))</td></tr>"
        });
    }

    function prepend1() {
        var tr1 = $("<tr class='prepend1'><td>prepend(content)</td></tr>");
        $("#table1").prepend(tr1);
    }

    function prepend2() {
        $("#table1").prepend(function(index) {
            return "<tr><td class='prepend2'>prepend(fn(index))</td></tr>"
        });
    }
    </script>
</body>

</html>

f:id:liguofeng29:20160227213835g:plain

node外部に追加
- after(content)
- after(fn(index))
- before(content)
- before(fn(index))
- insertAfter(selector) : selectorの前に追加
- insertBefore(selector) : selectorの後に追加

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> jQueryのnode追加 </title>
    <style type="text/css">
    div {
        border: 1px solid #000;
        height: 30px;
        width: 200px;
        background-color: #A5F9AA;
    }
    
    .after1 {
        color: red;
    }
    
    .after2 {
        color: blue;
    }
    
    .before1 {
        color: green;
    }
    
    .before2 {
        color: black;
    }
    </style>

</head>

<body>
    <input type="button" class="after1" value="after(content)" onclick="after1();">
    <input type="button" class="after2" value="after(fn(index))" onclick="after2();">
    <input type="button" class="before1" value="before(content))" onclick="before1();">
    <input type="button" class="before2" value="before(fn(index))" onclick="before2();"><br>
    <div id="div1">
        </lable>
    </div>

    <script type="text/javascript" src="jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript">
    function after1() {
        var label1 = $("<label class='after1'><td>after(content)</label>");
        $("#div1").after(label1);
    }

    function after2() {
        $("#div1").after(function(index) {
            return "<label class='after2'><td>after(fn(index))</label>";
        });
    }

    function before1() {
        var label1 = $("<label class='before1'><td>before(content)</label>");
        $("#div1").before(label1);
    }

    function before2() {
        $("#div1").before(function(index) {
            return "<label class='before2'><td>before(fn(index))</label>";
        });
    }
    </script>
</body>

</html>

f:id:liguofeng29:20160227214955g:plain

囲む
- wrap(wrappingElement)
- wrap(function(index))
- wrapAll(wrappingElement) : warpとの違いは、jQueryオブジェクトを全体だと見なし、一回だけ囲む
- wrapInner(wrappingElement) : 内部要素を囲む
- wrapInner(function(index))
- unwrap() : 親要素を消す

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> jQueryのwrap </title>
</head>

<body>
    <span id="test1">test1</span><br />
    <span id="test2">test2</span>
    <script type="text/javascript" src="jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript">
    // すべてのspanをdivで囲む
    $("span").wrap("<div style='border:1px dotted black'></div>");
    // すべてのspan内部を囲む
    $("span").wrapInner("<span style='background-color:#ddd'></span>");
    </script>
</body>

</html>

f:id:liguofeng29:20160227215918p:plain

入替
- replaceWith(newContent)
- replaceWith(fn(index))
- replaceAll(selector) : selectorと入れ替える
削除
- empty() : タグ以外全部削除
- remove([selector]) : 削除
- detach([selector]) : jQueryのdataは残す
複製
- clone(withDataAndEvents) : 引数はイベントを複製するかを指定