HTML Elements in jQuery and CSS styling in jQuery

Question

I am known to HTML and CSS. Now I am trying to learn jQuery. I want to know how to make a DIV in jQuery and then style it with CSS in jQuery?

I have searched alot on google but cant find any help there. I hope you can help me.

Everything from make a DIV and then styling it should only be done in jQuery. I dont want to use HTML at all.

Thanks

Creating a div in jquery: [http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery][1] Style your div in jquery: [http://stackoverflow.com/questions/19581763/jquery-to-change-style-attribute-of-a-div-class][2] [1]: http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery [2]: http://stackoverflow.com/questions/19581763/jquery-to-change-style-attribute-of-a-div-class — hiew1, Feb 14 '15 at 05:31
So its like you want to create a < div > tag and you don't want to mention < div > anywhere. ??? — prime, Feb 14 '15 at 06:13

score 0 · Answer 1 · answered Feb 14 '15 at 05:31

0

Try this

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#divid").css("background-color", "yellow");
    });
});
</script>

<div id="divid">This is a paragraph.</div>

answered Feb 14 '15 at 05:31

Arun

750
5
12

This is a paragraph, I am looking for DIV my friend. – cssnewbie Feb 14 '15 at 05:32

Nick Vasic · Accepted Answer · 2015-02-14T06:31:10.267

0

This sample attaches a div to the parent container, and adds some css styling to it.

$(document).ready(function(){
  var theNewDiv = $("<div id='mydiv'>").appendTo("body");
  theNewDiv.css({"height": "100px", "width": "100px", "background-color":"blue"});
});

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

edited Feb 14 '15 at 06:31

answered Feb 14 '15 at 05:34

Nick Vasic

1,886
1
11
6

1

I actually need everything to be done in jQuery, without using HTML...? – cssnewbie Feb 14 '15 at 05:49
You can create a div using jQuery and style it, but you still need a valid HTML container to attach your div, even if it is just $("body").append("
");
– Nick Vasic Feb 14 '15 at 05:54
You can attach it to BODY? – cssnewbie Feb 14 '15 at 05:57
Yes you can, $("body").append() method should work. – Nick Vasic Feb 14 '15 at 06:02
Could you please show me with the help of snippet? – cssnewbie Feb 14 '15 at 06:05
Done... I used appendTo() method instead, because it is easier to get a handle to the new div via the return variable. But moth append() and appendTo() achieve the same result. – Nick Vasic Feb 14 '15 at 06:09
This looks better. Is it possible to give ID to a DIV? Just as HTML... – cssnewbie Feb 14 '15 at 06:24
Yes, you can add the id attribute directly to the new jQuery object, as shown in the modified example. – Nick Vasic Feb 14 '15 at 06:32

prime · Answer 3 · 2015-02-14T06:11:49.920

I think the below is what you are looking at, first Jquery is not a replacement for html but you can manipulate html DOM elements. As an example you can add html elements to another element. I took below code from another SO answer. First select the parent element with something like

$("#id"), $("element") or $(".class")

Then use the .append("< div >foo< /div >") function. Alternatively, you can use the .html()

$("#foo").append("< div > hello world < /div >")

HTML Elements in jQuery and CSS styling in jQuery

3 Answers3