Append and Wrap using JQuery



Try the code below to Append one paragraph and wrap the existing div inside another div using jQuery:

Add the following code to the head section:

<head>
<title>jQuery wrapper</title>
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
 
  var dvWrap = $("#dvWrap");
  
var wrapper = dvWrap.wrap("<div></div>");
  
wrapper.css("border", "10px solid red");
  
wrapper.css("padding", "5px");
  
var inner = $("<p>This paragraph added with jQuery</p>");
  
inner.css("color", "blue");
  
inner.click(function(){alert("hello");});
  
wrapper.append(inner);
});
</script>
</head>

Add the following code to the body section:

<body>
<div id="dvWrap">
  <
h1>This is wrapped with a red box drawn by jQuery</h1>
</
div>
</body>

You can download the working sample attached here.

Thanks

Shinu