ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryのinsertAfter()メソッドの使用例

jQueryのinsertAfter()メソッドの使用例

巴扎黑
巴扎黑オリジナル
2017-06-24 13:25:331557ブラウズ

この記事では、jQuery の insertAfter() メソッドの使用法を主に紹介し、insertAfter() メソッドの機能と定義を例とともに分析し、必要な方は、一致する要素を別の指定された要素コレクションに挿入する使用方法について説明します。参考にしてください

この記事の例では、jQuery での insertAfter() メソッドの使用方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです:

このメソッドは、別の指定された要素セットの後に一致する要素を挿入します。
insertAfter() メソッドは、insertBefore() メソッドとは逆の効果があります。

文法構造:

コードは次のとおりです:

$(selector).insertAfter(content)

パラメータリスト:

パラメータ 説明
selector は、挿入されるコンテンツを定義します。
content コンテンツを後に挿入する要素を定義します。

サンプルコード:

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>insertAfter()
函数
-脚本之家</title> 
<style type="text/css"> 
p{ 
  width:100px; 
  height:100px; 
  border:1px solid red; 
} 
p{ 
  width:200px; 
  height:200px; 
  border:1px solid blue; 
} 
</style> 
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(
document
).ready(function(){ 
  $("button").click(function(){ 
    $("p").insertAfter("p"); 
  }) 
}); 
</script> 
</head> 
<body> 
<p>我的前面会被插入内容</p> 
<p>我是p元素</p> 
<button>点击查看效果</button> 
</body> 
</html>

上記のコードは、p要素をp要素の下、もちろん外側の下に挿入できます。

以上がjQueryのinsertAfter()メソッドの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。