jQuery: Create a div using jQuery with style tag

Last update on August 19 2022 21:50:45 (UTC/GMT +8 hours)

jQuery Practical exercise Part - I : Exercise-11

Create a division using jQuery with style tag.

Sample solution :

HTML Code :

 <!DOCTYPE html>
  <html>
  <head>
  <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>
  </head>
  <body>
  <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()" />
</body>
  </html>

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");
  $("body").append($div);
});
}

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.