You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
2.0 KiB
49 lines
2.0 KiB
<!doctype html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>My Learning Website</title> |
|
<link href="/styles/styles.css" rel="stylesheet" type="text/css"> |
|
<link href="/webdevelopment/styles/styles.css" rel="stylesheet" type="text/css"> |
|
<link href="../styles/samples.css" rel="stylesheet" type="text/css"> |
|
<script type="module" src="/scripts/article.js" defer></script> |
|
<script type="text/javascript" src="/jQuery/jquery-3.6.3.js"></script> |
|
|
|
<script type="text/javascript"> |
|
$("document").ready(function () { |
|
//create some new content |
|
//var newP = $("<p>"); |
|
//newP.append("<em>Hello There</em>"); |
|
// |
|
//$("#example").html(newP); |
|
// |
|
//$("#creation").prepend("Watch This! "); |
|
// |
|
//// change the existing content |
|
//$("#changing").html("<p>This is a new P</p>"); |
|
// |
|
|
|
}); |
|
</script> |
|
|
|
</head> |
|
<body> |
|
<h1 id="intro">Using jQuery to Create/Change Content</h1> |
|
<div id="content"> |
|
|
|
<p>jQuery makes it very easy to create new page content and change existing page content.</p> |
|
<h2 id="creation">Content Creation</h2> |
|
<p>Creating new content is as simple as passing a string of HTML to the $() function.</p> |
|
<p>For example, <code>$("<p>")</code> creates a new, empty paragraph tag. To add new content to the paragraph, |
|
you could simply write <code>$("<p>").append("<em>Hello there</em>")</code>.</p> |
|
<h2 id="changing">Changing Content</h2> |
|
<p>There are multiple ways to change page content using jQuery, depending on your needs.</p> |
|
<p>The <code>html()</code> and <code>text()</code> functions can be used to directly manipulate the contents of elements, |
|
and there are ways to control how content can be inserted and moved around in the page.</p> |
|
<div id="example"> |
|
</div> |
|
</div> |
|
</body> |
|
</html> |