Explore Replacing Element Content

Practice exploring updating HTML element inside content using the html and text methods.

Lab 1: Replacing inner content using html and text methods interactively.

Web view to preview JQuery lab using html and text methods to update interactively updating element inside using html method.

Steps:

Open the html-text-replace.html file in the web browser, open the Elements window and find the following HTML element.
```
•&nbsp;•&nbsp;•&nbsp;•&nbsp;•
```
The remaining steps use the html and the text methods on the #content element.
Open the Console window and enter the following that uses the html method …
```
$('#content').html(Math.random());
```
Review results on web page and in the Elements window.
Reload the page and in the Console window enter the following that uses the text method …
```
$('#content').text(Math.random());
```
Review results on web page and in the Elements window.
Reload the page and in the Console window enter the following that uses the html method …
```
$('#content').html('' + Math.random() + '');
```
Review results on web page and in the Elements window.
Reload the page and in the Console window enter the following that uses the text method …
```
$('#content').text('' + Math.random() + '');
```
Review results on web page and in the Elements window.

Reload the page and in the Console window enter the following that uses the text method …

$('#content').text('Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="https://lonhosford.com/" target="_blank">Sed hoc sane concedamus.</a> Duo Reges: constructio interrete. <b>Invidiosum nomen est, infame, suspectum.</b> <mark>Erat enim Polemonis.</mark> <code>Nihil enim hoc differt.</code> Et harum quidem rerum facilis est et expedita distinctio. <a href="http://loripsum.net/" target="_blank">Atqui reperies, inquit, in hoc quidem pertinacem;</a> Sed vos squalidius, illorum vides quam niteat oratio.');

Review results on web page and in the Elements window.

Web view Lorem Ipsum text with HTML markup using JQuery text method.

Web tools view Lorem Ipsum text with HTML markup using JQuery text method.

Reload the page and in the Console window enter the following line that uses the html method …

$('#content').html('Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="https://lonhosford.com/" target="_blank">Sed hoc sane concedamus.</a> Duo Reges: constructio interrete. <b>Invidiosum nomen est, infame, suspectum.</b> <mark>Erat enim Polemonis.</mark> <code>Nihil enim hoc differt.</code> Et harum quidem rerum facilis est et expedita distinctio. <a href="http://loripsum.net/" target="_blank">Atqui reperies, inquit, in hoc quidem pertinacem;</a> Sed vos squalidius, illorum vides quam niteat oratio.');

Review results on web page and in the Elements window.

Web view Lorem Ipsum text with HTML markup using JQuery html method.

Web tools view Lorem Ipsum text with HTML markup using JQuery html method.

Lab 2: Dynamic updating using html method.

Web view of example file for JQuery lab using updating element inside using html method.

Setup Instructions

Copy all the files from the start-05 folder to the practice folder and replace if necessary.

The lab's completed files can be found in the completed folder.

Steps:

Open the replace-html-quote.html file in the web browser, open the Sources window to show the replace-html-quote.js file and the Console window.

Your quote may vary depending on the random eQuotes array index generated.

In the Elements window expand to view the following element.

<p id="e-quote" class="text-center">&bullet;&nbsp;&bullet;&nbsp;&bullet;</p>

In the Console window enter the following line and observe the changes to the web browser view and the Elements window.

$('#e-quote').html('As a human being, one has been endowed with just enough <strong>intelligence</strong> to be able to see clearly how utterly <em>inadequate</em> that <strong>intelligence</strong> is when confronted with what exists.');

Web view after using the Console interactive mode to update the #e-quote element with the html method.

Console and Elements view after using the Console interactive mode to update the #e-quote element with the html method.

DIY: Open the replace-html-quote.js file in your editor and modify to update the #e-quote element using the quote variable, save and test.
```
	console.log(quote);
	$('#e-quote').html(quote);
```
Your quote may vary depending on the random eQuotes array index generated.

Complete and Continue