javascript - JQuery में एक div तत्व बनाना

JQuery 1.4 के रूप में आप गुणों को एक स्व-बंद तत्व में पास कर सकते हैं जैसे:

jQuery('<div/>', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!'
}).appendTo('#mySelector');

यहां यह Docs

उदाहरण jQuery 1.4 में पाया जा सकता है : 15 नई विशेषताएं जो आपको जाननी चाहिए ।

आप .jquery() विधि का उपयोग कर अलग टैग बना सकते हैं। और .append() विधि का उपयोग करके बाल टैग बनाएं। चूंकि jQuery चेनिंग का समर्थन करता है, आप दो तरीकों से सीएसएस भी लागू कर सकते हैं। या तो इसे कक्षा में निर्दिष्ट करें या बस कॉल करें .attr() :

var lTag = jQuery("<li/>")
.appendTo(".div_class").html(data.productDisplayName);

var aHref = jQuery('<a/>',{         
}).appendTo(lTag).attr("href", data.mediumImageURL);

jQuery('<img/>',{                                               
}).appendTo(aHref).attr("src", data.mediumImageURL).attr("alt", data.altText);

सबसे पहले मैं अपने div टैग में एक सूची टैग जोड़ रहा हूं और इसमें JSON डेटा डालना चाहता हूं। इसके बाद, मैं कुछ विशेषता प्रदान करते हुए सूची का एक बाल टैग बना रहा हूं। मैंने वैल्यू को वैरिएबल को असाइन किया है, ताकि मेरे लिए इसे जोड़ना आसान हो।

आप append (माता-पिता की अंतिम स्थिति में जोड़ने के लिए) का उपयोग कर सकते हैं या prepend (माता-पिता की मुट्ठी स्थिति में जोड़ने के लिए) का उपयोग कर सकते हैं:

$('#parent').append('<div>hello</div>');    
// or
$('<div>hello</div>').appendTo('#parent');

वैकल्पिक रूप से, आप एक अलग उत्तर में उल्लिखित .html() या .add() उपयोग कर सकते हैं।

इस बारे में कैसा है? यहां, pElement उस तत्व को संदर्भित करता है जिसे आप इस div अंदर रखना चाहते हैं (बच्चे का होना! :)।

$("pElement").append("<div></div");

स्ट्रिंग में आप उस div में आसानी से कुछ भी जोड़ सकते हैं - विशेषताएँ, सामग्री, आप इसे नाम दें। ध्यान दें, विशेषता मानों के लिए, आपको सही उद्धरण चिह्नों का उपयोग करने की आवश्यकता है।

उपयोग:

$("#parentDiv").append("<div id='childDiv'>new div to be produced</div>");

मुझे लगता है कि यह मदद करेगा।

तकनीकी रूप से $('<div></div>') एक div तत्व (या अधिक विशेष रूप से एक DIV DOM तत्व) बना देगा, लेकिन इसे आपके HTML दस्तावेज़ में नहीं जोड़ देगा। इसके बाद आपको अन्य उत्तरों के साथ संयोजन में इसका उपयोग करने की ज़रूरत होगी, वास्तव में इसके साथ कुछ भी उपयोगी (जैसे कि append() विधि या इस तरह का उपयोग करना)।

मैनिपुलेशन दस्तावेज आपको नए तत्वों को जोड़ने के तरीके के बारे में सभी विभिन्न विकल्प प्रदान करता है।

बस अगर आप कोई HTML टैग बनाना चाहते हैं तो आप इसे उदाहरण के लिए आजमा सकते हैं

var selectBody = $('body');
var div = $('<div>');
var h1  = $('<h1>');
var p   = $('<p>');

यदि आप फ्ले पर कोई तत्व जोड़ना चाहते हैं तो आप इसे आजमा सकते हैं

selectBody.append(div);

मुझे लगता है कि यह एक div जोड़ने का सबसे अच्छा तरीका है:

आईडी div_id के साथ div element में test div को जोड़ने के लिए:

$("#div_id").append("div name along with id will come here, for example, test");

अब इस अतिरिक्त परीक्षण div में HTML संलग्न करें:

$("#test").append("Your HTML");

मैंने अभी इसके लिए एक छोटी jQuery प्लगइन बनाई है।

यह आपके वाक्यविन्यास का पालन करता है:

var myDiv = $.create("div");

डोम नोड आईडी को दूसरे पैरामीटर के रूप में निर्दिष्ट किया जा सकता है:

var secondItem = $.create("div","item2");

क्या यह गंभीर है? नहीं, लेकिन यह वाक्यविन्यास $ ("<div> </ div>") से बेहतर है , और यह उस पैसे के लिए बहुत अच्छा मूल्य है।

(उत्तर से आंशिक रूप से कॉपी किया गया: jQuery document.createElement बराबर? )

ये सब मेरे लिए काम किया,

एचटीएमएल भाग:

<div id="targetDIV" style="border: 1px solid Red">
    This text is surrounded by a DIV tag whose id is "targetDIV".
</div>

जावास्क्रिप्ट कोड:

//Way 1: appendTo()
<script type="text/javascript">
    $("<div>hello  users</div>").appendTo("#targetDIV"); //appendTo: Append at inside bottom
</script>

//Way 2: prependTo()
<script type="text/javascript">
    $("<div>Hello,  users</div>").prependTo("#targetDIV"); //prependTo: Append at inside top
</script>

//Way 3: html()
<script type="text/javascript">
    $("#targetDIV").html("<div>Hello,  users</div>"); //.html(): Clean HTML inside and append
</script>

//Way 4: append()
<script type="text/javascript">
    $("#targetDIV").append("<div>Hello,  users</div>"); //Same as appendTo
</script>

वैकल्पिक रूप से संलग्न करने के लिए () आप appendTo() का भी उपयोग कर सकते हैं जिसमें एक अलग वाक्यविन्यास है:

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

HTML तत्व बनाने के लिए jQuery.create () - jQuery प्लगइन की जांच करें।

यदि आप Jquery> 1.4 का उपयोग कर रहे हैं, तो आप इयान के उत्तर के साथ सबसे अच्छे हैं। अन्यथा, मैं इस विधि का उपयोग करूंगा:

यह सेलोरॉन के जवाब के समान ही है, लेकिन मुझे नहीं पता कि उन्होंने jquery नोटेशन के बजाय document.createElement उपयोग क्यों किया।

$("body").append(function(){
        return $("<div/>").html("I'm a freshly created div. I also contain some Ps!")
            .attr("id","myDivId")
            .addClass("myDivClass")
            .css("border", "solid")                 
            .append($("<p/>").html("I think, therefore I am."))
            .append($("<p/>").html("The die is cast."))
});

//Some style, for better demonstration if you want to try it out. Don't use this approach for actual design and layout!
$("body").append($("<style/>").html("p{background-color:blue;}div{background-color:yellow;}div>p{color:white;}"));

मुझे यह भी लगता है कि कॉलबैक फ़ंक्शन के साथ append() का उपयोग करना इस मामले में अधिक पठनीय है, क्योंकि अब आप तुरंत शरीर में कुछ append() जा रहे हैं। लेकिन यह किसी भी कोड या पाठ लिखते समय हमेशा स्वाद का विषय है।

सामान्य रूप से, JQuery कोड में जितना संभव हो उतना HTML का उपयोग करें, क्योंकि यह ज्यादातर स्पेगेटी कोड है। यह त्रुटि प्रवण और बनाए रखने में कठोर है, क्योंकि HTML-स्ट्रिंग में आसानी से टाइपो हो सकते हैं। साथ ही, यह एक प्रोग्रामिंग भाषा (जावास्क्रिप्ट / Jquery) के साथ एक मार्कअप भाषा (एचटीएमएल) मिश्रित करता है, जो आमतौर पर एक बुरा विचार है।

$("<div/>").attr('id','new').appendTo('body');    

यह शरीर में आईडी "नया" के साथ नया div बना देगा।

<div id="foo"></div>

$('#foo').html('<div></div>');

div = $("<div>").html("Loading......");
$("body").prepend(div);    

document.createElement('div');