jQuery
prepend（）
と
prependTo（）
の両方のメソッドが同じタスクを実行しています。一致した要素の内容の前にテキストまたはHTMLコンテンツを追加します。主な違いは構文にあります。
例えば、
<div class="box">I'm a big box</div> <div class="box">I'm a big box 2</div>
1. $（ ‘selector’）. prepend（ ‘new text’）;
$('.box').prepend("<div class='newbox'>I'm new box by prepend</div>");
2. $（ ‘new text’）. prependTo（ ‘セレクタ’）;
$("<div class='newbox'>I'm new box by prependTo</div>").prependTo('.box');
結果
上記の両方のメソッドは同じタスクを実行しますが、構文が異なるため、
prepend（）
または
prependTo（）
の後に新しい内容が表示されます。これは本当に汎用性の高いツールです。スライダが必要なウェブサイトの場合は、これを行う方法です。あなたが大きなウェブサイト（例えば、http://www.o2.co.uk/broadband/[www.o2.co.uk/のようなもの）を見るか、使用していると思われる映画のWebサイト。それはスマートに見え、視聴者の目を引くイメージの回転を持つための素晴らしい方法です。それはあなたのウェブサイトにそれが本当に残りの部分よりも目立つように異なる次元を追加します。
<div class="box"> <div class='newbox'>I'm new box by prepend</div> I'm a big box </div> <div class="box"> <div class='newbox'>I'm new box by prepend</div> I'm a big box 2 </div>
自分で試してみてください
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
.box{
padding:8px;
border:1px solid blue;
margin-bottom:8px;
width:300px;
height:100px;
}
.newbox{
padding:8px;
border:1px solid red;
margin-bottom:8px;
width:200px;
height:50px;
}
</style>
</head>
<body>
<h1>jQuery prepend() and prependTo example</h1>
<div class="box">I'm a big box</div>
<div class="box">I'm a big box 2</div>
<p>
<button id="prepend">prepend()</button>
<button id="prependTo">prependTo()</button>
<button id="reset">reset</button>
</p>
<script type="text/javascript">
$("#prepend").click(function () {
$('.box').prepend("<div class='newbox'>I'm new box by prepend</div>");
});
$("#prependTo").click(function () {
$("<div class='newbox'>I'm new box by prependTo</div>").prependTo('.box');
});
$("#reset").click(function () {
location.reload();
});
</script>
</body>
</html>
