HTML METHODS - prependTo()

The prependTo() method in JQuery is used to insert HTML element at the beginning of an HTML element.

Example :

<html>
    <head>
    	<title> My First Programme </title>
  	</head>
  	
  	<style>
  		div {
  			color: yellow;
  		}
        
        p {
        	background-color: violet;
        }
  	</style>

  	<body>
    	<h1> JQuery </h1>
    	<p>New Code</p>
    	
    	<button> Click to set a new value </button>
    	

      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
      		$('button').click( function() {
				$('<div> Added new div element at the beginning </div>').prependTo('p');
			});
			
            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have to to add a new <div> element,

<div> Added new div element at the beginning </div>

At the beginning of,

<p>New Code</p>

And make the code like,

<p>
	<div> Added new div element at the beginning </div>
	New Code
</p>

And we have done it using the JQuery statement,

$('button').click( function() {
	$('<div> Added new div element at the beginning </div>').prependTo('p');
});

So, on button click, the prependTo() function is called,

$('<div> Added new div element at the beginning </div>').prependTo('p');

And the content of <p> element,

<p>New Code</p>

Is added with,

<div> Added new div element at the beginning </div>

And make to code like,

<p>
	<div> Added new div element at the beginning </div>
	New Code
</p>

We have added styles to <div> and <p> elements.

<style>
	div {
		color: yellow;
	}

	p {
		background-color: violet;
	}
</style>

So that you can understand, how the code looks like after adding <div> element.

❮❮ PREV NEXT ❯❯