英文:
javascript createElement with property
问题
以下代码可以正常工作：
const element = document.createElement('div');
element.classList.add('person');
但是以下代码不起作用：
const element = document.createElement('div').classList.add('person');
英文:
I'm trying to add a element from Javascript with classname person.
It works perfectly fine by below code.
const element = document.createElement('div');
element.classList.add('person');
But why the below not working?
const element = document.createElement('div').classList.add('person');
答案1
得分: 1
document.createElement()返回一个元素，但在元素上调用.classList.add不会返回相同的元素。
在你的第一个代码中，element成为一个新创建的元素。然后在下一行，你调用它的.classList.add()方法给该元素添加一个类。element变量本身从未改变，但.classList.add()改变了element的某个内部属性。
在你的第二个代码中，你使用document.createElement()创建一个新元素，然后立即调用.classList.add()给该元素添加一个类。然后.classList.add()不返回任何内容，所以element变量的值是undefined。当将函数链接在一起时，变量只会被赋予函数返回的最后一个值。
如果你真的想让最后一个例子生效，那么你需要创建一个新的函数，调用.classList.add()然后返回该元素，像这样：
function addClass(el, className) {
el.classList.add(className);
return el;
}
const element = addClass(document.createElement('div'), 'person');
console.log(element);
英文:
document.createElement() returns an element, but calling .classList.add on an element doesn't return that same element.
In your first code, element becomes a newly created element. Then on the next line, you call its .classList.add() method to add a class to that element. The element variable itself was never changed, but .classList.add() changed some internal property of element.
In your second code, you create a new element with document.createElement(), then immediately call .classList.add() to add a class to that element. Then .classList.add() doesn't return anything, so the element variable has the value undefined. Variables are only assigned the last value returned by a function when chaining functions together.
If you really wanted to make the last one work, then you'd need to create a new function that calls .classList.add() then returns the element, like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function addClass(el, className) {
el.classList.add(className);
return el;
}
const element = addClass(document.createElement('div'), 'person');
console.log(element);
<!-- end snippet -->
答案2
得分: 1
以下是要翻译的内容：
代码片段：
document.createElement('div').classList.add('person')
被认为无效，因为classList.add()方法不会返回添加了类的当前元素。而是返回undefined。
正确的方法是首先使用document.createElement('div')创建对象，然后将类添加到元素。
英文:
The code snippet:
document.createElement('div').classList.add('person')
is not considered valid because the classList.add() method does not return the current element with the added class. Instead, it returns undefined.
The correct approach is to first create the object using document.createElement('div'), and then add the class to the element.
答案3
得分: 0
我知道实现这个功能的最简单方法是：
const create = (elementType, properties) => Object.assign(
document.createElement(elementType),
properties
);
document.querySelector('body').append(create('div', {classList: 'person'}));
关于实际问题：
let element = document.createElement('div');
element.classList.add('person');
document.querySelector('body').append(element);
英文:
The easiest way I'm aware of to write this functionality is:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// a named Arrow function, that takes two arguments:
// elementType: String, the type of element you wish to create ('div', 'span', 'p'...), and
// properties: Object detailing the properties, and their values, you wish to assign to
// the created element, eg {...className: 'person', textContent: 'This is text'...}
// Object.assign() takes multiple Objects and copies the enumerable properties of one or more
// Objects and to the first Object (the 'target'), here this takes the properties from
// the properties Object, and copies them into the created element:
const create = (elementType, properties) => Object.assign(
document.createElement(elementType),
properties
);
// here we retrieve the <body> element, and then
document.querySelector('body')
// call Element.append() to append the created-element (from
// the create() function) to the document:
.append(create('div', {classList: 'person'}));
<!-- language: lang-css -->
body {
padding: 1rem;
}
.person {
border: 2px solid currentColor;
}
.person::before {
content: 'This is an element with the class of "person."';
}
div {
outline: 4px solid #f90;
}
<!-- end snippet -->
As for the actual question:
> But why [is] the below not working?
const element = document.createElement('div').classList.add('person');
That's due to final use of the classList API, as the classList.add() method as it returns only undefined:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let element = document.createElement('div');
console.log(element.classList.add('person'));
document.querySelector('body').append(element);
<!-- language: lang-css -->
body {
padding: 1rem;
}
.person {
border: 2px solid currentColor;
}
.person::before {
content: 'This is an element with the class of "person."';
}
div {
outline: 4px solid #f90;
}
<!-- end snippet -->
References:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论