1
2
3
4
5

<!--範例一-->
<div class="box">蘋果</div>

<!--範例二-->
<ul class="meau"></ul>

1
2
3
4
5

//範例一
$(".box").html("香蕉");

//範例二
$(".meau").html("<li>菜單內容</li>");

1
2
3
4
5
6
7

<!--範例一-->
<div class="box">香蕉</div>

<!--範例二-->
<ul class="meau">
  <li>菜單內容</li>
</ul>

1
2
3
4
5

<!--範例一-->
<div class="box">蘋果</div>

<!--範例二-->
<div class="box">香蕉</div>

1
2
3
4
5

//範例一
$(".box").css("border","solid 1px red");

//範例二
$(".box").css("transform","translate(30px,-15px)");

1
2
3
4
5

<!--範例一-->
<div class="box" style="border: solid 1px red">蘋果</div>

<!--範例二-->
<div class="box" style="transform: trasnlate(30px,-15px)">香蕉</div>

1

<div class="box">蘋果</div>

1
2
3
4
5

//加入在前面使用“prepend”
$(".box").prepend("香蕉");

//加入在後面使用“append”
$(".box").append("鳳梨");

1

<div class="box">香蕉蘋果鳳梨</div>

1

<div class="box">蘋果</div>

1

$(".box").text("香蕉");

1

<div class="box">香蕉</div>