LearnKode

3 Example(s) of JQuery PerpendTo


Description :

In this example creates a <div>element and uses prependTo() method to append the element at the start of parent element.


JQuery PerpendTo Example - 1 
<!DOCTYPE html> 
<html> 
<head> 
	<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
	
	<style> 
		.parent { 
			height: 100px; 
			width: 300px; 
			background: rgb(0, 126, 128); 
			margin: 0 auto; 
		} 
		.newElement { 
			height: 40px; 
			width: 100px; 
			margin: 0 auto; 
			color: rgb(141, 21, 21) 
		} 
	</style> 
</head> 
		
<body style = "text-align:center;"> 
	
	<h1 style = "color:rgb(119, 0, 128);" >welcome to Appwrk Solution</h1> 
	
	<div class= "parent"></div> 
	
	<br><br> 
	
	<button onclick="insert()"> insert </button> 
			
	<script> 
		function insert() { 
		$('<div class = "newElement">Hello! we are From' + ' Appwrk Team</div>').prependTo($('.parent'));		 
		} 
	</script> 
</body> 

</html>
Try it » Download Example »

Output

Description :

In this example creates a <div> element and uses >code>prependTo() method to append the element at the start of parent element.


JQuery PerpendTo Example - 2 
<!DOCTYPE html> 
<html> 
<head> 
	<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
	
	<style> 
		.parent { 
			height: 100px; 
			width: 300px; 
			background: rgb(0, 126, 128); 
			margin: 0 auto; 
		} 
		.newElement { 
			height: 40px; 
			width: 100px; 
			margin: 0 auto; 
			color: rgb(141, 21, 21) 
		} 
	</style> 
</head> 
		
<body style = "text-align:center;"> 
	
	<h1 style = "color:rgb(119, 0, 128);" >welcome to Appwrk Solution</h1> 
	
	<div class= "parent"></div> 
	
	<br><br> 
	
	<button onclick="insert()"> insert </button> 
			
	<script> 
		function insert() { 
		$('<div class = "newElement">Hello! we are From' + ' Appwrk Team</div>').prependTo($('.parent'));		 
		} 
	</script> 
</body> 

</html>
Try it » Download Example »

Output

Description :

In this example we will show you how to add a HTML heading to the beginning of a paragraph element using the jQuery prepend() method.


JQuery PerpendTo Example - 3 
<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").prepend("<h1>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</h1>"); 
        });
    });
</script>
</head>

<body>
    <p style="color:indigo; font-size:20px">We are breathing in a planet where almost everything adjacent to us is technology driven. </p>
    <button>Add Appwrk Heading</button>
</body> 
</html>
Try it » Download Example »

Output