Friday, 4 June 2021

Wrap all direct child element of body into div using JQuery.

 To wrap all element of body in div using JQuery, anyone can use the following code :-

$('body').children().wrapAll("<div style='border: thick solid blue;'></div>"); //wrap all body childs into wrapper/div

If you want to wrap any other child element of ane parent element then we can also use above code. Suppose you want to wrap all child elements of <p> (paragraph) the you can use code like -

$('p').children().wrapAll("<div style='border: thick solid blue;'></div>");

Now see the complete example -

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<div style="border:1px solid; width:30%"><span>span 1</span><span>span2</span></div>

<span>second paragraph</span>

<p><span>third paragraph</span><a href="page1.html">go to page1</a></p>

<button id='action'>Click to Perform Action</button>

<script>

 $('#action').click(function() {

 $('body').children().wrapAll("<div style='border: thick solid blue;'></div>"); //wrap all body childs into wrapper/div

});

</script> 

</body>

</html>

No comments:

Post a Comment

Change image source dynamically on hyperlink

 Changing image source dynamically using JQuery. Here in this example I have created there hyperlink and stored all images in the same folde...