Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="zh-hant-TW">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DOM操作</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>    
    $(function() {
      $("#demo1").on('click',function(){
        $("#layer1").html("<p>jQuery很強大</p>").css('color','red');
      });
      $("#demo2").on('click',function(){
        $("#layer2").prepend("<p>Layer2子元素之前</p>");
        $("#layer2 p:first").css('color','blue');
      });
      $("#demo3").on('click',function(){        
        $("#layer2").append("<p>Layer2子元素之後</p>");
        $("#layer2 p:last").css('color','green');
      });
      $("#demo4").on('click',function(){
        $("#layer3").before("<p>Layer3元素之前</p>");
        $("#layer2 + p").css('color','gold');
      });
      $("#demo5").on('click',function(){
        $("#layer3").after("<p>Layer3元素之後</p>");
        $("#layer3 + p").css('color','purple');
      });
      $("#demo6").on('click',function(){
        $("#layer3").remove();
      });
    });
  </script>
</head>
<body>
  <div id="layer1" style="background-color:lightgrey">
    <p>Layer1 content</p>
  </div>
  <div id="layer2" style="background-color:lightgrey">
    <p>Layer2 content</p>
  </div>
  <div id="layer3" style="background-color:lightgrey">
    <p>Layer3 content</p>
  </div>
​
  <button id="demo1">html()</button>
  <button id="demo2">prepend()</button>
  <button id="demo3">append()</button>
  <button id="demo4">before()</button>
  <button id="demo5">after()</button>
  <button id="demo6">remove()</button>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
peterjupro
0viewers