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);