ねこきっくぱんちのメモ帳

ITに関することいろいろめも。たまにアニメ。

jQuery004　要素内外への要素挿入(prepend,append,before,after)

jQuery

要素内外への要素挿入(prepend,append,before,after)

f:id:neko_kick_panch:20170531011624p:plain

■ポイント
・対象要素の外側：before(); afret();
・対象要素の内側：prepend(); apend();
・テキストの変更：text();

■コード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの基本</title>
<meta name="description" content="">
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
</head>

<style>
html,body,h1,h2,p,ul,li{
  margin:0;
  padding:0;
}
header{  padding: 40px;}
</style>

<body>

<script>
$(document).ready(function(){
  $('#text').text('テキストの変更');
  $('#prepend').prepend('<small>Prependで追加</small>');
  $('#append').append('<small>appendで追加</small>');
$('#text').before('<small>before()で#textの前に追加</small>');
  $('#text').after('<small>after()で#textの後に追加</small>');
});
</script>

<div class="container">
<header>
<h1>jQuery練習</h1>
<p id="text">基本とセレクタ練習</p>
<h2 id="prepend">:Prepend</h2>
<h2 id="append">Append:</h2>
</header>
<nav>
<ul><a></a></ul>
</nav>
</div>
</body>
</html>

■参考
本：jQueryデザイン入門