JS/ES – JQuery – DOMの追加

概要

動的に生成したDOMを指定したDOMに対して追加する。追加されるDOMの外側／内側、前／後に応じて、before()、prepend()、append()、after()の各メソッドを使う。

書式

[追加されるDOM].before([追加するDOM]): 追加されるDOMの外側直前に追加。
[追加されるDOM].prepend([追加するDOM]): 追加されるDOMの内側先頭に追加。
[追加されるDOM].append([追加するDOM]): 追加されるDOMの内側末尾に追加。
[追加されるDOM].after([追加するDOM])

追加されるDOMの外側直後に追加。

実行例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Adding DOM</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>
      $(() => {
        $('div').before($('<p></p>').text('beforeで追加'));
        $('div').prepend($('<p></p>').text('prependで追加'));
        $('div').append($('<p></p>').text('appendで追加'));
        $('div').after($('<p></p>').text('afterで追加'));
      });
    </script>
  </head>
  <body>
    <div style="border: solid">
      <p>既存の要素の中身</p>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Adding DOM</title>

$(() => {

$('div').before($('<p></p>').text('beforeで追加'));

$('div').prepend($('<p></p>').text('prependで追加'));

$('div').append($('<p></p>').text('appendで追加'));

$('div').after($('<p></p>').text('afterで追加'));

});

</script>

</head>

<body>

<p>既存の要素の中身</p>

</div>

</body>

</html>

結果イメージ：

beforeで追加

prependで追加
既存の要素の中身
appendで追加

afterで追加

TauStation

JS/ES – JQuery – DOMの追加

概要

書式

実行例

コメントを残すコメントをキャンセル

概要

書式

実行例

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル