のえら

技術備忘とかメモとか.間違いはつっこんでいただきたい所存.アフィリエイトはやっていません.

jQueryで要素操作を行うサンプル

プログラミング jQuery

毎回「アレ、取得した要素をここに追加したいときどうするんだっけ？」ってなるので、jQueryで要素の移動(挿入)を行うサンプルを作成。このままコピペしてhtml形式で保存すれば動作確認できる。視覚的にわかりやすくするためにスタイルを適当にぺしぺししてる。

使用している関数

appendTo
append
prependTo
prepend
insertAfter
insertBefore
before
after

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <style type="text/css">
      .sample-outer {
        margin-bottom: 30px;
        width: 600px;
        padding: 10px;
        border: 1px solid #000;
      }
      .sample-outer > h1 {
        margin: 3px 0;
      }
      .sample-inner {
        width: 80%;
        padding: 15px;
        background-color: #c0c0c0;
      }
      .sample-inner > div {
        width: 60%;
        font-size: 18px;
        padding: 8px;
      }
      .sample-inner.sib1 {
        margin-bottom: 8px;
      }
      .s1 {
        background-color: #006400;
      }
      .s2 {
        background-color: #ff8c00;
      }
      .s3 {
        background-color: #00bfff;
      }
      button {
        display: block;
        margin: 30px 0;
      }
      textarea {
        width: 400px;
      }
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(function() {
      $("button").on("click", function() {
        var outer = $(this).parent(".sample-outer");
        var inner = $(this).siblings(".sample-inner.sib1");
        var eName = $(this).val();
        outer.find(".s3")[eName](inner.children(".s2"));
        $(this).prop("disabled", true);
      });
    });
    </script>
  </head>
  <body>
    <div id="content">
      <p>ボタンをクリックすると、bar.xxx(foo)を実行します.<br/>※xxxはボタンに表示されている関数</p>
      <div class="sample-outer">
        <h1>appendTo</h1>
        <div class="sample-inner sib1">
          <div class="s1">hoge</div>
          <div class="s2">foo</div>
        </div>
        <div class="sample-inner sib2">
          <div class="s3">bar</div>
        </div>
        <button type="button" value="appendTo">appendTo!!</button>
      </div>

      <div id="" class="sample-outer">
        <h1>append</h1>
        <div class="sample-inner sib1">
          <div class="s1">hoge</div>
          <div class="s2">foo</div>
        </div>
        <div class="sample-inner sib2">
          <div class="s3">bar</div>
        </div>
        <button type="button" value="append">append!!</button>
      </div>

      <div id="" class="sample-outer">
        <h1>prependTo</h1>
        <div class="sample-inner sib1">
          <div class="s1">hoge</div>
          <div class="s2">foo</div>
        </div>
        <div class="sample-inner sib2">
          <div class="s3">bar</div>
        </div>
        <button type="button" value="prependTo">prependTo!!</button>
      </div>

      <div id="" class="sample-outer">
        <h1>prepend</h1>
        <div class="sample-inner sib1">
          <div class="s1">hoge</div>
          <div class="s2">foo</div>
        </div>
        <div class="sample-inner sib2">
          <div class="s3">bar</div>
        </div>
        <button type="button" value="prepend">prepend!!</button>
      </div>

      <div id="" class="sample-outer">
        <h1>insertAfter</h1>
        <div class="sample-inner sib1">
          <div class="s1">hoge</div>
          <div class="s2">foo</div>
        </div>
        <div class="sample-inner sib2">
          <div class="s3">bar</div>
        </div>
        <button type="button" value="insertAfter">insertAfter!!</button>
      </div>

      <div id="" class="sample-outer">
        <h1>insertBefore</h1>
        <div class="sample-inner sib1">
          <div class="s1">hoge</div>
          <div class="s2">foo</div>
        </div>
        <div class="sample-inner sib2">
          <div class="s3">bar</div>
        </div>
        <button type="button" value="insertBefore">insertBefore!!</button>
      </div>

      <div id="" class="sample-outer">
        <h1>before</h1>
        <div class="sample-inner sib1">
          <div class="s1">hoge</div>
          <div class="s2">foo</div>
        </div>
        <div class="sample-inner sib2">
          <div class="s3">bar</div>
        </div>
        <button type="button" value="before">before!!</button>
      </div>

      <div id="" class="sample-outer">
        <h1>after</h1>
        <div class="sample-inner sib1">
          <div class="s1">hoge</div>
          <div class="s2">foo</div>
        </div>
        <div class="sample-inner sib2">
          <div class="s3">bar</div>
        </div>
        <button type="button" value="after">after!!</button>
      </div>
    </div>
  </body>
</html>