<!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>
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"); }); });
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"); }); });
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>"); }); });
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>"); }); });
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>'); }); });
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>'); }); });
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(); }); });
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."); }); });
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>"); }); });
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>"); }); });
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>"); }); });
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>"); }); });
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>"); }); });
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>"); }); });
<!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>
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"); }); });