Manipulating - Exercise

Contact Us or call 1-877-932-8228
Manipulating - Exercise

Manipulating

Duration: 10 to 20 minutes.

Open the file index.html in your browser. Use the sandbox.js or work in Firebug to accomplish the following:

  1. Add five new list items to the end of the unordered list #myList. (Hint: for (var i = 0; i<5; i++) { ... } )
  2. Permanently remove the odd list items from #myList.
  3. Add another h2 and another paragraph to the last div.module.
  4. Add another option to the select element; give the option the value "wednesday", and inner HTML of "Wednesday".
  5. Add a new div.module to the page after the last one; put a copy of one of the existing images inside of it. Note that the images have ids, which should be removed from the copy.

Solution:

jqy-concepts/Solutions/js/sandbox-manipulating.js
$(document).ready(

	function() {
		// Add five new list items to the end of #myList.
		for (var i = 0; i < 5; i++) {
			$('<li/>', { html: 'new item ' + i, 'class': 'current' })
				.appendTo('#myList');
		}

		// Remove the odd list items from #myList.
		$('#myList>li:odd').remove();

		// Add another h2 and another paragraph to the last div.module.
		$('div.module:last')
			.append('<h2>New Heading</h2>').append('<p>New Paragraph</p>');

		// Add another option to the select element;
		// give the option the value "wednesday",
		// and inner HTML of "Wednesday".
		$('#specials select[name=day]')
			.append('<option value="wednesday">Wednesday</option>');
		// another way
		$('<option>Thursday</option>')
			.val('thursday')
			.appendTo('#specials select[name=day]');

		// Add a new div.module to the page after the last one;
		// put a copy of one of the existing images inside of it.
		// Note that the images have ids, which should be removed.
		$('<div class="module">')
			.append($('#slideshow img:first').clone().removeAttr('id'))
			.insertAfter('div.module:last');
	}
);
Next