jQuery: Create a div using jQuery with style tag

jQuery Practical exercise Part - I : Exercise-11

Create a division using jQuery with style tag.

Sample solution :

HTML Code :

 <!DOCTYPE html>
  <script src="https://code.jquery.com/jquery-git.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Create a div using jQuery with style tag.</title>
  <p>This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.</p> 
  <input type="button" value="Click to add new division" onclick="new_div()" />

JavaScript Code :

function new_div() {
$(document).ready(function() {
  var test = {
    id: "div",
    class: "divclass",
    css: {
      "color": "Green"
  var $div = $("<div>", test);
  $div.html("New Division");

See the Pen jquery-practical-exercise-11 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Make first word bold of all elements.
Next: Move one DIV element inside another using jQuery.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.