Crash Course On jQuery - Changing The HTML

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

by Tony Le

HTML

<!-- WRAPPER -->
<div id="wrapper">
  <p>Here is some awesome plain example text!</p>
  <button type="button" id="change-html-btn">Change To Link</button>
  <button type="button" id="change-text-btn">Change To Link Using .text()</button>
  <button type="button" id="reset-btn">Reset</button>
</div>
<!-- WRAPPER END -->

CSS

/* OUR INITIAL STYLE */

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

p {
  padding: 20px;
}

JavaScript

// if the change html button is clicked on
$('#change-html-btn').on('click', function(){
	// within the p tag add in the following html code
  $('p').html('<a href="#">Hey, I just inserted an a tag!</a>');
});

// if the change text button is clicked on
$('#change-text-btn').on('click', function(){
	// in the p tag add in the following text
  $('p').text('<a href="#">Hey, I just inserted an a tag! But oh no.. it does not work with just the text() action!</a>');
});

// if the reset button is clicked on 
$('#reset-btn').on('click', function(){
	// within the p tag revert back to the original content
  $('p').html('Here is some awesome plain example text!');
});