<p id="demo">
  This is p tag.
  and id is 'demo'
</p>

<p id="demo2"></p>

<p class="cls">
  This is P tag.
  and class is 'cls'
</p>

<h1 class="cls">
  This is h1 tag
  and class is 'cls'
</h1>


<pre>
  <button type="button" onclick="myFunc()">Javascript Button</button>
  <button type="button" id="jqueryBtn">jQuery Button</button>
</pre>

<script type="text/javascript">
  function myFunc() {
    // demo2 글을 demo 글로 바꿈.
    var text = document.getElementById('demo').innerHTML;
    document.getElementById('demo2').innerHTML = text + ' with javascript';

    // cls 클래스 글을 Hello world 로 바꿈.
    var num = document.getElementsByClassName('cls').length;
    for (var i = 0; i < num; i++) {
      document.getElementsByClassName('cls')[i].innerHTML='Hello javascript world';
    }
  }
</script>

<script type="text/javascript">
  $(document).ready(function () {
    $('#jqueryBtn').click(function () {
      // demo2 글을 demo 글로 바꿈.
      var text = $('#demo').text();
      $('#demo2').text(text+' with jQuery');

      // cls 클래스 글을 Hello world 로 바꿈.
      $('.cls').text('Hello jQuery world');
    })
  });
</script>