@ PHP

wrap():他の要素で包む

指定した要素を追加するのではなく、特定の要素で包む(ラップする)こともできます。

各要素を指定した要素で包む

wrap() は指定した要素を他の要素で包むメソッドです。包みたい HTML タグを <要素名></要素名> のように空の状態で引数に指定します。

wrap.html

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

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

<body>
  <strong>テキストテキスト</strong>
  <strong>テキストテキスト</strong>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("strong").wrap("<h1></h1>")
});
</script>
</body>

</html>

demo

すべての要素を別の要素で包む

指定した複数要素を、まとめて別の要素で包むには、wrapAll() を使います。

wrapall.html

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

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

<body>
  <strong>テキストテキスト</strong>
  <strong>テキストテキスト</strong>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("strong").wrapAll("<h1></h1>")
});
</script>
</body>

</html>

demo

指定した要素の子要素を別の要素で包む

指定した要素の子要素やテキストを別の要素で包みたいときは、wrapInner() を使います。

wrapinner.html

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

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

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

</html>

demo