読者です 読者をやめる 読者になる 読者になる

liguofeng29’s blog

個人勉強用ブログだっす。

jQuery - DOMのnode関連操作

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) : 引数はイベントを複製するかを指定