JavaScript & jQuery Video Tutorial

Part 7 - jQuery HTML Manipulation

The following code is from the Video.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
 <title>Demo</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <style type="text/css">
   div {background-color: yellow;}
 </style>
</head>

<body>
 <div>
  <h1>Heading</h1>
  <p>First line of text.</p>
  <p>Second line of text.</p>
 </div>
 
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>

</html>

text() Replace text

Replaces the text in the selected elements. Example: text("clicked") - Click on the heading text to change it.

$(document).ready(function() {
  $("h1").click(function() {
    $(this).text("clicked");
  });
});

Try it out.

text() Replace text

Replaces the text in the selected elements. Example: text("new text") - Click on the heading text to change the text in the <p> elements.

$(document).ready(function() {
  $("h1").click(function() {
    $("p").text("new text");
  });
});

Try it out.

text() Replace text with HTML source

Replaces the text in the selected elements. Example: text("new <b>text</b>") - Click on the heading text to change the text in the <p> elements. The HTML markup will be shown.

$(document).ready(function() {
  $("h1").click(function() {
    $("p").text("new <b>text</b>");
  });
});

Try it out.

html() Replace with HTML markup

Replaces the text with text and HTML markup. Example: html("new <b>text</b>") - Click on the heading text to change the text in the <p> elements. The word "text" will be in bold.

$(document).ready(function() {
  $("h1").click(function() {
    $("p").html("new <b>text</b>");
  });
});

Try it out.

html() Replace with HTML markup including attributes

Replaces the text with text and HTML markup. Example: html('new <b style="color: red;">text</b>') - Click on the heading text to change the text in the <p> elements. The word "text" will be red and bold.

$(document).ready(function() {
  $("h1").click(function() {
    $("p").html('new <b style="color: red;">text</b>');
  });
});

Try it out.

html() Replaces whole content

Replaces the text with text and HTML markup. Example: html('new <b style="color: red;">text</b>') - Click on the heading text to change the whole content of the <div> element.

$(document).ready(function() {
  $("h1").click(function() {
    $("div").html('new <b style="color: red;">text</b>');
  });
});

Try it out.

empty() Empty the contents

Removes the content of the selected elements. Example: empty() - Click on the heading text to remove the contents of the <div> element.

$(document).ready(function() {
  $("h1").click(function() {
    $("div").empty();
  });
});

Try it out.

append() Append text

Append text at the end of the selected elements. Example: append(" More text.") - Click on the heading text to append text to the end of the <p> elements.

$(document).ready(function() {
  $("h1").click(function() {
    $("p").append(" More text.");
  });
});

Try it out.

append() Append HTML markup

Append HTML markup at the end of the selected elements. Example: append("<p>new text</p>") - Click on the heading text to append a <p> element to the end of the <div> element.

$(document).ready(function() {
  $("h1").click(function() {
    $("div").append("<p>new text</p>");
  });
});

Try it out.

after() Add HTML markup after selection

Add HTML markup after the selected elements. Example: after("<p>new text</p>") - Click on the heading text to add a <p> element after the <div> element.

$(document).ready(function() {
  $("h1").click(function() {
    $("div").after("<p>new text</p>");
  });
});

Try it out.

after() Add HTML markup after multiple selections

Add HTML markup after the selected elements. Example: after("<p>new text</p>") - Click on the heading text to add a <p> element after each of the two <p> elements.

$(document).ready(function() {
  $("h1").click(function() {
    $("p").after("<p>new text</p>");
  });
});

Try it out.

prepend() Prepend HTML markup

Prepend HTML markup at the start of the selected elements. Example: prepend("<p>new text</p>") - Click on the heading text to prepend a <p> element to the start of the <div> element.

$(document).ready(function() {
  $("h1").click(function() {
    $("div").prepend("<p>new text</p>");
  });
});

Try it out.

before() Add HTML markup before selection

Add HTML markup before the selected elements. Example: before("<p>new text</p>") - Click on the heading text to add a <p> element before the <div> element.

$(document).ready(function() {
  $("h1").click(function() {
    $("div").before("<p>new text</p>");
  });
});

Try it out.

replaceWith() Replace HTML markup

Replace the selected elements with new HTML markup. Example: replaceWith("<h2>new text</h2>") - Click on the heading text to replace the <p> elements with <h2> elements.

$(document).ready(function() {
  $("h1").click(function() {
    $("p").replaceWith("<h2>new text</h2>");
  });
});

Try it out.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
 <title>Demo</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <style type="text/css">
   div {background-color: yellow;}
 </style>
</head>

<body>
 <div>
  <h1>Heading</h1>
  <img id ="picture" src="eightball.gif" alt="eight ball" />
 </div>
 
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>

</html>

attr() change attribute

Changes attribute values. Example: attr("src", "floatingball.gif") - Click on the heading text to change the image.

$(document).ready(function() {
  $("h1").click(function() {
    $("#picture").attr("src", "floatingball.gif");
  });
});