ywork2020.com

Title

要素のインナーに新しい内包タグを挿入する

目次 (INDEX)

wrapInnerとは

ここで説明する wrapInner とは次の語句からなるjQueryのメソッドです。
wrap
読み: ラップ
意味: 包む
inner
読み: インナー
意味: 内的、内部

目次に戻る

wrapInnerメソッドの概要

このメソッドは、呼び出し元の要素のインナーの両端に新しいタグを挿入しコンテンツを内包します。

使用する上での注意点として、引数には開始タグと終了タグがある要素を指定してください。 例えば input 等の置換要素は開始タグのみで構成されますが、この様なタグを引数に指定しないでください。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

$(Selector).wrapInner(htmlString);
$(Selector).wrapInner(Selector);
$(Selector).wrapInner(Element);
$(Selector).wrapInner(jQuery);
$(Selector).wrapInner(function);

目次に戻る

サンプルコードと実行結果

ここでは、div要素のコンテンツにspan要素を配置しています。

サンプルでは、div要素をメソッドの呼び出し元とし、そのインナーの両端に bタグを挿入します。 つまり簡単にいうと、ここでは div 内のコンテンツを bタグで囲むということになります。

サンプルコード: CSS
<style>
	div{
		background-color: ##lightpink;
		margin-bottom: 1em;
		padding: 0.5em;
	}
	b{
		display: block;
		background-color: ##lightblue;
		padding: 0.5em;
	}
	span{
		display: block;
		background-color: ##lightyellow;
		padding: 0.5em;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<input type="checkbox">
	<div>< span>innerText< /span></div>
	<script>...</script>
</body>
  • 06: input type="checkbox" (チェックボックスです。クリックすると script 02 ~ 09 のコードが実行されます。)
  • 07: div (div要素です。ここでは、この要素がメソッドの呼び出し元になります。)
  • 07: span (span要素です。チェックボックスにチェックが入ると、この要素はb要素で囲まれます。)
サンプルコード: script
<script>
	$("input[type='checkbox']").click(function(){
		if($(this).prop("checked") == true){
			$("div").wrapInner("<b />");
		}
		else{
			$("span").unwrap("b");
		}
	});
</script>
  • 02-09: $("input[type='checkbox']").click(function(){処理}) (チェックボックスがクリックされると 処理 を実行します。)
  • 03-08: if($(this).prop("checked") == true){}else{} (チェックボックスがチェックされたら 04行目 のコードが実行されます。チェックを外すと 07 行目のコードが実行されます。)
実行結果:
SPAN

目次に戻る