JQuery Video Tutorial Pt 4

JQuery The DOMI’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>

 

11 Responses to “JQuery Video Tutorial Pt 4”

  1. Sam says:

    I am a developer and videos are great.
    Thanks

  2. Willem says:

    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.

  3. Chandra says:

    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.

    • admin says:

      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

  4. Noreen says:

    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.

  5. Noreen says:

    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.

    • admin says:

      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

  6. Noreen says:

    ok thanks,
    I’ll try that

  7. howard says:

    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?

Leave a Reply

Your email address will not be published.

Google+