@ PHP

prependTo() appendTo():HTMLの移動

HTML の要素を文書内に新たに追加するのではなく、もともと散在していた要素内の文書の位置を変更することもできます。

HTML 要素内の先頭に移動

指定した要素を他の要素内の先頭に移動するには、prependTo() を使います。

引数に移動先の要素をセレクタで指定します。

prependto.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p>テキストテキスト</p>
  <strong>先頭に移動</strong>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("strong").prependTo("p")
});
</script>
</body>

</html>

demo

HTML 要素の最後に移動

指定した要素を他の要素内の最後に移動するには、appendTo() を使います。

appendto.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p>テキストテキスト</p>
  <strong>最後に移動</strong>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("strong").appendTo("p")
});
</script>
</body>

</html>

demo

HTMLの前に移動

指定した要素の前に移動するには、insertBefore() を使います。insertBefort() は移動先の要素をセレクターで指定します。

insertbefore.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p>テキストテキスト</p>
  <h1>前に移動</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("h1").insertBefore("p")
});
</script>
</body>

</html>

demo

HTML の後に移動

指定した要素を他の要素の後ろに移動するには、insertAfter() を使います。insertAfter() は移動先の要素をセレクターで指定します。

insertafter.html

<!DOCTYPE html>
    <html lang="ja">
    
<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <h1>後ろに移動</h1>
  <p>テキストテキスト</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("h1").insertAfter("p")
});
</script>
</body>

</html>

demo