Using the html method

Click on the text below to change the innerHTML of the element.

  x$('#button1').click(function(){
    x$('#div1').html("New Content From JavaScript Land");
  });

Using the html method to add content to the top and bottom of an unordered list

The html method can insert content into the top, bottom, outer or (by default) inner. #list1 is an empty unordered list. When you use top,bottom and outer, x$().html() inspects the string you pass in and does what you want.

  x$('#button2').click(function(){
    x$('#list1').html("top","New Content Added to Top");
  });
     
  x$('#button3').click(function(){
    x$('#list1').html("bottom","New Content Added to Bottom");
  });        

Using html with paragraphs

This example is identical to the one above, except instead of a list, we are using paragraphs. When ever we need to create a node, x$().html will look to see what the parent Nodes First Sibling is and create that node. In this case, it is a paragraph.

  x$('#button4').click(function(){
    x$('#p1').html("top","New Content Added to Top");
  });
  
  x$('#button5').click(function(){
    x$('#p1').html("bottom","New Content Added to Bottom");
  });

Using html to wrap markup fragments

	x$('#button6').click(function(){
		x$('#para2').html('outer','
fresh content in a DIV tag
');
	});

	x$('#button7').click(function(){
		x$('#para2').html('outer','
fresh content in a P tag
');
	});

	x$('#button8').click(function(){
		x$('#para2').html('remove');
	});