jQueryオブジェクト０７

jQuery 授業



要素の内容をまるごと書き換え - text/html



ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素の内容をまるごと書き換え - text/html</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>
body {
background-color: #F93;
}
	
#div1 {
width: 400px;
height: 50px;
background-color: #FF9;
}

#div2 {
width: 400px;
height: 50px;
background-color: #CF9;
}

#div3 {
width: 400px;
height: 50px;
background-color: #9C9;
}

#div4 {
width: 400px;
height: 50px;
background-color: #C6C;
}

</style>
</head>
<body>

<div id="div1">入っていたテキスト</div>
<div id="div2">入っていたテキスト</div>
<div id="div3">入っていたテキスト</div>
<div id="div4">入っていたテキスト</div>

<script>
$(function() {
$('#div1').text('textメソッドでの内容の書き換え');
$('#div2').html('htmlメソッドでの内容の書き換え');
$('#div3').text('<strong>textメソッド</strong>での内容書き換え');
$('#div4').html('<strong>htmlメソッド</strong>での内容書き換え');
});
</script>
</body>
</html>

ブラウザで表示【 Chrome 】