Crash Course On jQuery - Changing The Text

Example of how to change an element's text in jQuery.

by Tony Le

HTML

<!-- WRAPPER -->
<div id="wrapper">
  <p>Here is some awesome plain example text!</p>
  <button type="button" id="id-btn">Awesome Button #1</button>
  <button type="button" class="class-btn">Awesome Button #2</button>
</div>
<!-- WRAPPER END -->

CSS

/* OUR INITIAL STYLE */

body {
  background-color: #fff;
  color: #000;
}

p {
  padding: 20px;
}

JavaScript

// if awesome button # 1 is clicked on
$('#id-btn').on('click', function(){
	// change the text within the p tag
  $('p').text('Hey, I just clicked on Awesome Button #1! Awesome..');
});

// if awesome button # 2 is clicked on
$('.class-btn').on('click', function(){
	// change the text within the p tag
  $('p').text('Hey, I just clicked on Awesome Button #2! Cool..');
});