如何使用带有样式标记的 jQuery 创建 div？

创建一个 带有样式标签的

元素使用 jQuery 可以在以下步骤中完成。

脚步：

• 创建一个新的
  元素。
• 使用我们要应用的所有样式创建一个对象。
• 选择一个父元素，将这个新创建的元素放在哪里。
• 将创建的div元素放入父元素中。

示例 1：此示例将创建一个

元素并使用append()方法将该元素附加到父元素的末尾。

HTML

  

    
    
  
    
        .divClass {
            height: 40px;
            width: 200px;
            border: 1px solid blue;
            color: white
        }
    

  

    GeeksforGeeks
    
        This is parent div
    
    
    
    
    
        <!-- 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);
            });
        }
    

  

输出：

附加

示例 2：此示例将创建一个

元素并使用prependTo()方法将该元素附加到父元素的开头。

HTML

  

    
    
  
    
        .divClass {
            height: 40px;
            width: 200px;
            border: 1px solid blue;
            color: white
        }
    

  

    GeeksforGeeks
    
    
        This is parent div
    
    
    
    
        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'));
            });
        }
    

  

输出：

前置文本