jQuery：基本４　HTML/CSSを操作する命令 - Webデザインのこと、いろいろ

32　テキストの変更と取得
jQueryの練習 - p56~テキストの変更と取得：完成版にリンク

<script>
$(function(){
$('#push').on('click',function(){
	$('p#first').text('変更後');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">変更前</p>
</body>

33　テキストの取得
jQueryの練習 - p56~テキストの変更と取得：完成版にリンク

<script>
$(function(){
$('#push').on('click',function(){
	$('p#second').text($('p#first').text());
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">取得する文字列</p>
<p id="second">変更前</p>
</body>

34　 HTMLの変更
jQueryの練習 - p58~HTMLの変更と取得：完成版にリンク

<script>
$(function(){
$('#push').on('click',function(){
$('p#first').html('<strong>変更後</strong>');
});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">変更前</p>
</body>

35　 HTMLの取得
jQueryの練習 - p58~HTMLの変更と取得：完成版にリンク

<script>
$(function(){
	$('#push').on('click',function(){
	$('p#second').html($('p#first').html());
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first"><strong>変更後</strong></p>
<p id="second">変更前</p>
</body>

36　HTMLの挿入
要素の内容を残したままHTMLに追加したいときは
prepend() 指定した要素内部の先頭に挿入
append() 指定した要素内部の最後に挿入
before() 指定した要素の前に挿入
after() 指定した要素の後ろに挿入
jQueryの練習 - p59~HTMLの挿入：完成版にリンク

<script>
$(function(){
	$('#push').on('click',function(){
	$('p#first').prepend('<strong>先頭に挿入</strong>');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">テキストテキスト</p>

37　append()
指定した要素内部の最後に挿入
jQueryの練習 - p59~HTMLの挿入：完成版にリンク

<script>
$(function(){
	$('#push').on('click',function(){
	$('p#first').append('<strong>最後に挿入</strong>');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">テキストテキスト</p>
</body>

38　before()
指定した要素の前に挿入
jQueryの練習 - p59~HTMLの挿入：完成版にリンク

<script>
$(function(){
	$('#push').on('click',function(){
	$('p#first').before('<h1>前に挿入</h1>');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">テキストテキスト</p>
</body>

39　after()
指定した要素の後ろに挿入
jQueryの練習 - p59~HTMLの挿入：完成版にリンク

<script>
$(function(){
	$('#push').on('click',function(){
	$('p#first').after('<h1>後ろに挿入</h1>');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p id="first">テキストテキスト</p>
</body>

40　prependTo()
もともと存在していた要素の文書内の位置を変更する
prependTo() 指定した要素を、他の要素の内部の先頭に移動
appendTo() 指定した要素を、他の要素の内部の最後に移動
insertBefore() 指定した要素を、他の要素の前に移動
insertAfter() 指定した要素を、他の要素の後ろに移動
jQueryの練習 - p61~HTMLの移動：完成版にリンク

<script>
$(function(){
	$('#push').on('click',function(){
	$('strong').prependTo('p');
	});
});
</script>
</head>

<body>
<button id="push">押す</button>
<p>テキストテキスト</p>
<strong>先頭に移動</strong>
</body>