How to create a div using jQuery with style tag ?
Creating an <div> element with a style tag using jQuery can be done in the following steps.
Steps:
- Create a new <div> element.
- Create an object with all the styles that we want to apply.
- Choose a parent element, where to put this newly created element.
- Put the created div element into the parent element.
Example 1: This example will create an <div> element and use the append() method to append the element at the end of the parent element.
HTML
<!DOCTYPE html> < html > < head > < script src = "https://code.jquery.com/jquery-git.js" > </ script > < style > .divClass { height: 40px; width: 200px; border: 1px solid blue; color: white } </ style > </ head > < body > < h2 style = "color:green" >w3wiki</ h2 > < div id = "parent" > This is parent div </ div > < div style = "height:10px;" ></ div > <!-- JavaScript function addText() is called to add to parent div--> < input type = "button" value="Add <div> Text" onclick="addText()" /> < script > <!-- Function to add text in a div element with above styles--> function addText() { $(document).ready(function() { var object = { id: "divID", class: "divClass", css: { "color": "Red" } }; var addition = $("< div >", object); addition.html("Added text GFG"); $("#parent").append(addition); }); } </ script > </ body > </ html > |
Output:
Example 2: This example will create an <div> element and uses the prependTo() method to append the element at the start of the parent element.
HTML
<!DOCTYPE html> < html > < head > < script src = "https://code.jquery.com/jquery-git.js" > </ script > < style > .divClass { height: 40px; width: 200px; border: 1px solid blue; color: white } </ style > </ head > < body > < h2 style = "color:green" >w3wiki</ h2 > < div style = "height:10px;" ></ div > < div id = 'parent' > This is parent div </ div > < div style = "height:10px;" ></ div > < input type = "button" value = "Prepend text div " onclick = "prependDiv()" /> < script > function prependDiv() { $(document).ready(function() { var object = { id: "divID", class: "divClass", css: { "color": "Red" } }; <!--Prepend object is created before the parent div--> var prependObject = $("< div >", object); prependObject.html("Prepend text is GFG"); $(prependObject).prependTo($('#parent')); }); } </ script > </ body > </ html > |
Output:
Contact Us