【jQuery】タグ要素を指定のHTMLタグ要素で囲む方法－wrapInner()｜DAD UNION

jQueryのwrapInner()を使って、指定したタグ（class=”txt”）をsectionタグで囲んでみます。
後から一時的に指定の文字だけ目立たせたい時などに使えます。

Contents

タグ要素を指定のHTMLタグ要素で囲むCSSの記述
タグ要素を指定のHTMLタグ要素で囲むHTMLの記述
wrapInner()を使って、タグ要素を指定のHTMLタグ要素で囲むJavaScriptの記述
【wrapInner】指定したタグ要素を、指定のHTMLタグ要素で囲むデモページ

タグ要素を指定のHTMLタグ要素で囲むCSSの記述

※タグ要素（.txt）と囲むタグ（section）のCSS記述です。必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
section{
  width: 500px;
  margin: 0 auto;
  background-color: #000000;
  font-size: 24px;
  font-weight: bold;
}
.txt{
  color: #ffffff;
  line-height: 2em;
}
</style>

タグ要素を指定のHTMLタグ要素で囲むHTMLの記述

※タグ要素（class=”txt”）を予め用意します。

<h1>予め記述してるclass=txtタグ×3をwrapInnerを使用し、sectionタグで囲んでます</h1>

<div class="txt">テキスト1</div>
<div class="txt">テキスト2</div>
<div class="txt">テキスト3</div>

wrapInner()を使って、タグ要素を指定のHTMLタグ要素で囲むJavaScriptの記述

※jquery-2.2.0.min.jsファイルを読み込みます。予め用意したタグ（class=”txt”）をsectionタグで囲みます。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".txt").wrapInner('<section></section>');
});
</script>