JQuery Video Tutorial Pt 4
I’ve received many requests to cover Document Object Model manipulation with JQuery. So, in this JQuery Video Tutorial I’ll show you numerous ways to add and delete elements to the DOM.
JQuery provides numerous ways to add elements and precise ways to delete others. I’ll specifically cover the following functions: before(), insertBefore(), prependTo(), appendTo(), append(), insertAfter(), after() and remove().
All of the code follows the video. Leave any questions or comments below.
Code From the Video
First Program
<html>
<head>
<title>JQuery Animations</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function() {
// Bind function calls to the buttons on the page
$(‘#replaceWHtml’).bind(‘click’, replaceWHtml);
$(‘#replaceWText’).bind(‘click’, replaceWText);
$(‘#addAPara’).bind(‘click’, addAPara);
$(‘#removeAPara’).bind(‘click’, removeAPara);
$(‘#lastIsFirst’).bind(‘click’, lastIsFirst);
$(‘#addBefore’).bind(‘click’, addBefore);
$(‘#addAfter’).bind(‘click’, addAfter);
$(‘#addToTextBox’).bind(‘click’, addToTextBox);
});
// You use html when you want to replace tags
function replaceWHtml() {
$(‘#h3Tag’).html(‘<h6>Now I\’m an h6 tag</h6>’);
}
// You use text when you want to replace only the text
function replaceWText() {
$(‘#h3Tag’).text(‘<h6>Didn\’t replace text</h6>’);
}
// You can append anything
function addAPara() {
$(‘#randPara’).append(‘<p>Another Paragraph</p>’);
}
// Remove deletes an html element
function removeAPara() {
$(‘#randPara p:last’).remove();
}
// Here I use append to move the last p to the first position
function lastIsFirst() {
$(‘#randPara p:last’).append($(‘#randPara p:first’));
}
// You use before to place elements before another
function addBefore() {
$(‘#randPara p:first’).before(‘I go before anything’);
}
// You use after to place elements after another
function addAfter() {
$(‘#randPara p:last’).after(‘I go after everything’);
}
// Use val to change form element values
function addToTextBox() {
$(‘#randText’).val(‘Random Text’);
}
</script>
</head>
<body>
<div><h3>Playing With Text</h3></div>
<div>
<h3 id=”h3Tag”>H3 Tag</h3>
</div>
<br />
<div id=”randPara”>
<p id=”firstP”>The first paragraph<p>
</div>
<br />
<form action=””>
<input type=”text” id=”randText”></input>
<button type=”button” id=”replaceWHtml”>Replace w/ HTML</button>
<button type=”button” id=”replaceWText”>Replace w/ Text</button>
<button type=”button” id=”addAPara”>Add Text</button>
<button type=”button” id=”removeAPara”>Remove Text</button>
<button type=”button” id=”lastIsFirst”>Last to First</button>
<button type=”button” id=”addBefore”>Add Before</button>
<button type=”button” id=”addAfter”>Add After</button>
<button type=”button” id=”addToTextBox”>Add To Text Box</button>
</form>
</body>
</html>
Second Program
<html>
<head>
<title>JQuery Animations</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function() {
$(‘#deleteSpan’).bind(‘click’, deleteSpan);
// before places the new element before the paragraph
$(‘#randPara’).before(‘<span>Before Paragraph</span>’);
// insertBefore places the new element as a sibling
$(‘<span> Insert Before Paragraph</span>’).insertBefore(‘#randPara’);
// prependTo places the new element as the first child of the element
$(‘<span>Prepend To Paragraph</span>’).prependTo(‘#randPara’);
// appendTo places the new element as a child
$(‘<span>Append To Paragraph</span>’).appendTo(‘#randPara’);
// append places the new element as the last child of the element
$(‘#randPara’).append(‘<span> Append Paragraph</span>’);
// insertAfter places the new element as a sibling
$(‘<span> Insert After Paragraph</span>’).insertAfter(‘#randPara’);
// after places the new element after the paragraph
$(‘#randPara’).after(‘<span> After Paragraph</span>’);
function deleteSpan()
{
$(‘span’).remove(‘:contains(“Append”)’);
}
});
</script>
</head>
<body>
<div><h3>Playing With Text</h3></div>
<div>
<h3 id=”h3Tag”>H3 Tag</h3>
</div>
<br />
<div id=”randPara”>
<p id=”firstP”>The First Paragraph<p>
</div>
<br /><br />
<form action=””>
<button type=”button” id=”deleteSpan”>Delete Spans</button>
</form>
<br />
</body>
</html>
I am a developer and videos are great.
Thanks
Thank you. I’m glad you like them
I like the tutorial.
The use of smart quotes however makes it difficult to just copy the code to a file and experiment with it.
Anyway, thanks for this enlightening tutorial.
Yes I used to do that for security. All of my new tutorials allow for clean copying now. I’ll go back and correct that issue ASAP
Pleas help me to copy the exact form elements when i click on add more and that should append remove on it while clicking on the remove it should be removed . the form should be posted i mean it should insert the value in database.
can u help me.
As this tutorial continues I show you how to interact dynamically with php. In my tutorial called web design and programming I cover how to us php and MySQL.
If you put parts of those tutorials together you’ll be able to do what you’re trying to do
Hi Derek,
I have the following code:-
$(“#savedata”).click(function () {
$(this).hide(“slow”);
$(this).show(“slow”);
});
It all works fine when the button is clicked. The one problem is that the php code automatically runs as the form is being loaded and I only want it to run when the button is clicked. Any ideas?
Thanks for the great videos.
Hi Derek,
The previous comment/question read like below except I put in the php signs and that section was deleted when showing the comment. Here it is again with text for the start and end of php code
I have the following code:-
$(“#savedata”).click(function () {
$(this).hide(“slow”);
$(this).show(“slow”);
The php start sign goes here
update_option(‘MyOption2’,
‘updatedOption’ );
The php end sign goes here
});
It all works fine when the button is clicked. The one problem is that the php code automatically runs as the form is being loaded and I only want it to run when the button is clicked. Any ideas?
Thanks for the great videos.
You could trigger the event like this
input type="button" value="functionToCall" onclick="functionToCall();"
script type="text/javascript"
function functionToCall(){
$.get("codeToCall.php",function(anyAttributes)
{
Execute Stuff
});
}
/script
ok thanks,
I’ll try that
Great videos. Wonderful gift to the Internet. … When these functions execute on the html tags in the string parameter, does JQuery actually parse this string and modify the DOM tree based on the tags or does it just basically insert HTML through the innerHTML property?