jQuery中的元素属性

Question

我是jQuery的新手。所以在JavaScript中，你可以创建一个div，并给它这样它自己的特性：

var msgbubble = document.createElement('div'); 
    msgbubble.marginTop="10px"; 
    msgbubble.style.backgroundColor="#ccc"; 

是有反正我可以在jQuery和如何将其追加创建一个这样的元素。 谢谢。

Answer 1

入住此代码段创建DIV具有一些CSS属性的元素，并使用jQuery设置其他属性。

$(document).ready(function() { 
 
    let elem = $("div"); // create div element and reference it with `elem` variable 
 
    
 
    // Set css properties to created element 
 
    elem.css(
 
    { 
 
    'background-color': 'red', 'marginTop': '50px', 
 
    'height': '200px', 'width': '200px' 
 
    } 
 
); 
 

 
    // Set attribute to created element 
 
    elem.prop(
 
    { 
 
     'id':'div1', 'class': 'myClass' 
 
    } 
 
    ); 
 
    
 
    $('body').append(elem); 
 
});

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

有关jQuery的访问https://www.w3schools.com/jquery

希望有更多的信息，这一小段代码对你的作品.. :) :)

Answer 2

jQuery的简单地使用.append()方法，尽管它也有.appendTo()，其功能同样的方式，虽然两个在语法上不同。

$("span").append("Appended text");

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

 
<span></span>

屁股实际程式化，可以直接通过.css()属性来完成：

el.css('margin-top', '10px'); 
el.css('background-color', '#ccc'); 

希望这有助于！ :)

Answer 3

创建一个div，设置属性，并将其附加的一个小例子：

var msgBubble = $('<div></div>'); 
 

 
// set css properties 
 
msgBubble.css({ 
 
    'margin-top': '10px', 
 
    'background': '#ccc' 
 
}); 
 

 
// or set html attributes 
 
msgBubble.attr({ 
 
    'data-foo': 'bar' 
 
}); 
 

 
// add some text so it actually has a height 
 
msgBubble.text('message bubble'); 
 

 
$('span').append(msgBubble);

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

Answer 4

随着jQuery(html)你可以通过HTML文本，然后将创建一个元素。

var element = jQuery('<div></div>'); 

如果通过了第二个参数的属性，jQuery(html, attributes)，它将使用这些并将它们设置的元素。

var element = jQuery('<div></div>',{ 
    css:{ 
    marginTop:'10px', 
    backgroundColor:'#ccc' 
    } 
}); 

要附加您可以使用各种方法，如append()，appendTo()。

element.appendTo(document.body); 

所以，如果你想在一个去，你会结合所有这些像这样来创建元素，设置样式，并追加要素：

jQuery('<div></div>',{ 
    css:{ 
    marginTop:'10px', 
    backgroundColor:'#ccc' 
    }, 
    text:"Some text to go into the element" 
}).appendTo(document.body);