JQuery Access HTML Element

From CoderLearner
Jump to: navigation, search

jQuery Access HTML elements

jQuery uses to retrieve content from or assign content to HTML elements.

Syntax

$("p").html("something"); // assign
$("p").html(); // get 

$("div").html();

Note

You can append value to the end or assign value to the begining or the end of the HTML elements.

Example 1

<html>
	<head>
		<title>Basic Jquery</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery.min.js">
		</script>
		<script language="javascript">
			$(document).ready(function(){
				alert($("p").html()); // get the HTML element content
				
				$("i").html("wonderful"); // assign the HTML element
			});
		</script>
	</head>
	<body>
		<h3>Hello Word</h3>
		<p>
			Everyone is <i>great</i>, 
			and, it is a <i>good</i> night.
			I can tell that.
		</p>
	</body>
</html>

Example 2

<!DOCTYPE html>
<html>
   <head>
      <title>First Project</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script language="javascript">
         $(document).ready(function(){
            var p1= $("p").html(); // get the HTML element content
	    var h3 = $("h3").html(); // get h3 content
            
            $("#box").html('<h2>'+h3+'</h2>'+'<br/>'+p1); // assign the HTML element
         });
      </script>
   </head>
   <body>
      <h3>Hello Word</h3>
      <p>
         Everyone is <i>great</i>, 
         and, it is a <i>good</i> night.
         I can tell that.
      </p>
      <div id="box"></div>
   </body>
</html>

Try It


<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>