ฉันจะเพิ่มคลาสได้divอย่างไร
var new_row = document.createElement('div');คำตอบ:
new_row.className = "aClassName";นี่คือข้อมูลเพิ่มเติมเกี่ยวกับ MDN: className
new_row.className = "aClassName1 aClassName2";เป็นเพียงแอตทริบิวต์คุณสามารถกำหนดสตริงใด ๆ ที่คุณชอบแม้ว่ามันจะทำให้ HTML ไม่ถูกต้อง
new_row.classList.add('aClassName');เพราะคุณสามารถเพิ่มชื่อคลาสได้หลายชื่อ
classListเป็นได้รับการสนับสนุนใน IE9 หรือต่ำกว่า
ใช้.classList.add()วิธีการ:
const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);<div class="foo"></div>วิธีนี้ดีกว่าเขียนทับclassNameคุณสมบัติเนื่องจากจะไม่ลบคลาสอื่น ๆ และไม่เพิ่มคลาสหากองค์ประกอบมีอยู่แล้ว
คุณสามารถสลับหรือลบคลาสโดยใช้element.classList(ดูเอกสาร MDN )
นี่คือการทำงานของซอร์สโค้ดโดยใช้ฟังก์ชั่น
<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>นอกจากนี้ยังมีวิธี DOM ในการทำเช่นนี้ใน JavaScript:
// 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);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]);var new_row = document.createElement('div');
new_row.setAttribute("class", "YOUR_CLASS");สิ่งนี้จะใช้ได้ ;-)
นอกจากนี้ยังควรดูที่:
var el = document.getElementById('hello');
if(el) {
el.className += el.className ? ' someClass' : 'someClass';
}หากคุณต้องการสร้างฟิลด์อินพุตใหม่ด้วยตัวอย่างเช่น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">
หากคุณต้องการสร้างแท็กที่ซ้อนกันโดยใช้ JavaScript วิธีที่ง่ายที่สุดคือinnerHtml:
var tag = document.createElement("li");
tag.innerHTML = '<span class="toggle">Jan</span>';ผลลัพธ์จะเป็น:
<li>
<span class="toggle">Jan</span>
</li>หมายเหตุ:
classListสถานที่ให้บริการไม่ได้รับการสนับสนุนในInternet Explorer 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')ที่มา: วิธีเพิ่ม js
สิ่งนี้จะได้ผล
$(document.createElement('div')).addClass("form-group")