我如何为div添加一个类?
var new_row = document.createElement('div');
当前回答
使用.classList.add()方法:
const element = document.querySelector('div.foo'); element.classList.add('酒吧'); console.log (element.className); < div class = " foo " > < / div >
这个方法比覆盖className属性更好，因为它不会删除其他类，如果元素已经有该类，也不会添加该类。
您还可以使用element切换或删除类。classList(参见MDN文档)。
其他回答
这个答案是很久以前写的/接受的。从那时起，更好，更全面的答案和例子已经提交。你可以向下滚动来找到它们。以下是为后人保留下来的公认的原始答案。
new_row.className = "aClassName";
这里有更多关于MDN: className的信息
如果你想在一个方法中创建多个元素。
function createElement(el, options, listen = [], appendTo){ let element = document.createElement(el); Object.keys(options).forEach(function (k){ element[k] = options[k]; }); if(listen.length > 0){ listen.forEach(function(l){ element.addEventListener(l.event, l.f); }); } appendTo.append(element); } let main = document.getElementById('addHere'); createElement('button', {id: 'myBtn', className: 'btn btn-primary', textContent: 'Add Alert'}, [{ event: 'click', f: function(){ createElement('div', {className: 'alert alert-success mt-2', textContent: 'Working' }, [], main); } }], main); <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <div id="addHere" class="text-center mt-2"></div>
<script>
document.getElementById('add-Box').addEventListener('click', function (event) {
let itemParent = document.getElementById('box-Parent');
let newItem = document.createElement('li');
newItem.className = 'box';
itemParent.appendChild(newItem);
})
</script>
如果你想创建一个新的输入字段，例如文件类型:
// 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>
下面是使用函数方法的工作源代码。
<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>
