253

আমি কীভাবে ক্লাস যুক্ত করব div?

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

javascript dom

— কি দারুন
সূত্র

6

অনুমানটি খুব খারাপ যে ক্লাসগুলি তৈরির উপাদানকে প্যারামিটার হিসাবে নির্দিষ্ট করার অনুমতি দেয় না।

— গা

আপনি যদি একটি বর্গ যুক্ত করতে চান তাহলে অন্য ক্লাসের অপসারণ ছাড়া , দেখতে এই উত্তর ।

— মিশা পেরেকোভস্কি

446

new_row.className = "aClassName";

এখানে MDN সম্পর্কিত আরও তথ্য: শ্রেণীকরণের নাম

— ডারকো জেড
সূত্র

5

একাধিক শ্রেণীর নাম নির্ধারণ সম্পর্কে কি?

— সাইমন

5

@ স্পঞ্জটির new_row.className = "aClassName1 aClassName2";এটির একটি বৈশিষ্ট্য, আপনি যে কোনও স্ট্রিং আপনার পছন্দ মতো নির্ধারণ করতে পারেন, এমনকি এটি যদি অবৈধ এইচটিএমএল তৈরি করে

— ডার্কো জেড

16

new_row.classList.add('aClassName');আপনি সুপারিশ করব যেহেতু আপনি একাধিক শ্রেণীর নাম যুক্ত করতে পারেন

— স্টিভেনটসুওো

@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( MDN ডকুমেন্টেশন দেখুন )।

— মিশা পেরেকোভস্কি
সূত্র

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

জাভাস্ক্রিপ্টে এটি করার ডোম উপায়ও রয়েছে:

// 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
সূত্র

এটি কোনও ভাল সমাধান নয় কারণ সমস্ত ব্রাউজারে এই পদ্ধতির কাজ করে না। সেটএট্রিবিউট বর্তমানে ব্যবহৃত ব্রাউজারগুলির কেবল 60% দ্বারা সমর্থিত। caniuse.com/#search=setAttribute

— রাগাস

0

এটি একবার নজর দেওয়াও মূল্যবান:

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

— Yoni
সূত্র

একটি ব্যাখ্যা ক্রম হবে।

— পিটার মর্টেনসেন

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

পোস্ট করার জন্য আপনাকে ধন্যবাদ, এটি আমার জন্য কাজ করেছে, আমার একটি জ্যুচুরি সমাধান দরকার।

— মিডকনিট

আমি কীভাবে জাভাস্ক্রিপ্টে কোনও ডিওএম উপাদানগুলিতে ক্লাস যুক্ত করতে পারি?

ক্রস ব্রাউজার সমাধান