253

मैं किस तरह के लिए एक वर्ग जोड़ सकता हूँ div?

var new_row = document.createElement('div');

javascript dom

— वाह
स्रोत

6

बहुत बुरा कल्पना करने के लिए एक मानक के रूप में वर्गों को निर्दिष्ट करने की अनुमति नहीं है createElement।

— Ga

यदि आप अन्य वर्गों को हटाए बिना एक वर्ग जोड़ना चाहते हैं , तो यह उत्तर देखें ।

— मिशैल पेरोलाकोव्स्की

447

new_row.className = "aClassName";

यहाँ MDN पर अधिक जानकारी है: className

— डार्को जेड
स्रोत

5

कई वर्ग के नाम सेट करने के बारे में क्या?

— शमौन

5

@ new_row.className = "aClassName1 aClassName2";इसकी एक विशेषता के रूप में, आप अपनी पसंद के किसी भी स्ट्रिंग को असाइन कर सकते हैं, भले ही यह अमान्य html के लिए बना हो

— Darko Z

16

मैं यह भी सिफारिश करूंगा new_row.classList.add('aClassName');कि आप तब कई वर्ग के नाम जोड़ सकते हैं

— StevenTsooo

@StevenTsooo ध्यान दें कि classListहै असमर्थित IE9 में या नीचे।

— दिनुली

क्या कोड की एक पंक्ति में क्लासनाम के साथ एक तत्व बनाने का एक तरीका है - और अभी भी तत्व का संदर्भ मिलता है? उदाहरण के लिए: myEL = document.createElement ('div')। addClass ('yo') 'काम नहीं करेगा।

— कोकोडोको

36

.classList.add()विधि का प्रयोग करें :

const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);

<div class="foo"></div>

स्निपेट का विस्तार करें

यह विधि classNameसंपत्ति को अधिलेखित करने से बेहतर है , क्योंकि यह अन्य वर्गों को नहीं हटाता है और वर्ग को जोड़ता नहीं है यदि तत्व पहले से ही है।

आप element.classList( एमडीएन प्रलेखन देखें ) का उपयोग करके कक्षाओं को टॉगल या हटा सकते हैं ।

— मिचेल पेरोलाकोव्स्की
स्रोत

28

यहां फ़ंक्शन अप्रोच का उपयोग करके सोर्स कोड काम कर रहा है।

<html>
    <head>
        <style>
            .news{padding:10px; margin-top:2px;background-color:red;color:#fff;}
        </style>
    </head>

    <body>
    <div id="dd"></div>
        <script>
            (function(){
                var countup = this;
                var newNode = document.createElement('div');
                newNode.className = 'textNode news content';
                newNode.innerHTML = 'this created div contains a class while created!!!';
                document.getElementById('dd').appendChild(newNode);
            })();
        </script>
    </body>
</html>

— सनी एस.एम.
स्रोत

8

इसलिए? यह एक उदाहरण के रूप में कार्य करता है, इसमें कुछ भी गलत नहीं है।

— केरी

पुन "जबकि निर्मित" : आप मतलब है ", जबकि बनाया जा रहा" ? अपने उत्तर को संपादित करके जवाब दें , यहाँ टिप्पणियों में नहीं। अग्रिम में धन्यवाद।

— पीटर मोर्टेंसन

एक स्पष्टीकरण क्रम में होगा। उदाहरण के लिए, "फंक्शन अप्रोच" से आपका क्या मतलब है ? क्या आप विस्तृत कर सकते हैं ( अपने उत्तर को संपादित करके , टिप्पणियों में यहाँ नहीं)? अग्रिम में धन्यवाद।

— पीटर मोर्टेंसन

15

जावास्क्रिप्ट में ऐसा करने का DOM तरीका भी है:

// Create a div and set class
var new_row = document.createElement("div");
new_row.setAttribute("class", "aClassName");
// Add some text
new_row.appendChild(document.createTextNode("Some text"));
// Add it to the document body
document.body.appendChild(new_row);

— हस्से ब्योर्क
स्रोत

2

var newItem = document.createElement('div');
newItem.style = ('background-color:red'); 
newItem.className = ('new_class');
newItem.innerHTML = ('<img src="./profitly_files/TimCover1_bigger.jpg" width=50 height=50> some long text with ticker $DDSSD');
var list = document.getElementById('x-auto-1');
list.insertBefore(newItem, list.childNodes[0]);

— डिएगो स्लिंगर
स्रोत

2

यह समझाने पर विचार करें कि आपने इसे क्यों पोस्ट किया है, यह दूसरों को सीखने में मदद करेगा।

— थॉमस स्माइथ

वोट दिया क्योंकि यह देशी जावास्क्रिप्ट / वेनिला जावास्क्रिप्ट है और इसे किसी अन्य पुस्तकालय या ढांचे की आवश्यकता नहीं है।

— obotezat

एक स्पष्टीकरण क्रम में होगा।

— पीटर मोर्टेंसन

1

var new_row = document.createElement('div');

new_row.setAttribute("class", "YOUR_CLASS");

यह काम करेगा ;-)

स्रोत

— PedroProgrammer
स्रोत

यह एक अच्छा समाधान नहीं है क्योंकि यह दृष्टिकोण सभी ब्राउज़रों पर काम नहीं करता है। setAttribute आज उपयोग में केवल 60% ब्राउज़रों द्वारा समर्थित है। caniuse.com/#search=setAttribute

— रागों

0

यह भी देखने लायक है:

var el = document.getElementById('hello');
if(el) {
    el.className += el.className ? ' someClass' : 'someClass';
}

— योनि
स्रोत

एक स्पष्टीकरण क्रम में होगा।

— पीटर मोर्टेंसन

0

यदि आप उदाहरण के लिए एक नया इनपुट फ़ील्ड बनाना चाहते हैं file:

 // Create a new Input with type file and id='file-input'
 var newFileInput = document.createElement('input');

 // The new input file will have type 'file'
 newFileInput.type = "file";

 // The new input file will have class="w-95 mb-1" (width - 95%, margin-bottom: .25rem)
 newFileInput.className = "w-95 mb-1"

उत्पादन होगा: <input type="file" class="w-95 mb-1">

यदि आप जावास्क्रिप्ट का उपयोग करके नेस्टेड टैग बनाना चाहते हैं, तो सबसे सरल तरीका innerHtmlनिम्न है:

var tag = document.createElement("li");
tag.innerHTML = '<span class="toggle">Jan</span>';

उत्पादन होगा:

<li>
    <span class="toggle">Jan</span>
</li>

— माइल मिजाटोविक
स्रोत

0

क्रॉस-ब्राउज़र समाधान

नोट: classListसंपत्ति इंटरनेट एक्सप्लोरर 9 में समर्थित नहीं है । निम्नलिखित कोड सभी ब्राउज़रों में काम करेगा:

function addClass(id,classname) {
  var element, name, arr;
  element = document.getElementById(id);
  arr = element.className.split(" ");
  if (arr.indexOf(classname) == -1) { // check if class is already added
    element.className += " " + classname;
  }
}

addClass('div1','show')

स्रोत: कैसे जेएस वर्ग को जोड़ने के लिए

— रवि मकवाना
स्रोत

-3

यह भी चलेगा।

$(document.createElement('div')).addClass("form-group")

— मुहम्मद आवा
स्रोत

5

केवल अगर आप jQuery का उपयोग कर रहे हैं।

— डेन गुयेन

1

पोस्ट करने के लिए धन्यवाद, इसने मेरे लिए काम किया, मुझे एक jquery समाधान की आवश्यकता थी।

— midknyte

मैं जावास्क्रिप्ट में एक DOM तत्व के लिए एक वर्ग कैसे जोड़ सकता हूं?

क्रॉस-ब्राउज़र समाधान