如何使用 Object.assign 设置 "value" 和 "for" 属性

Question

如何使用 Object.assign() 设置元素的值？除了 <input> 的 "value" 和 <label> 的 "for" 之外，所有其他属性似乎都会显示。这是代码：

window.onload = function createForm () {

    // Form header >>>>
    const formHeaderText = document.createTextNode("Form");
    headerEl.appendChild(formHeaderText);
    container.appendChild(headerEl);

    // Form element >>>
    Object.assign(formEl, {
        name: "inputForm",
        id: "myForm"
    });
   container.appendChild(formEl);

    // Name Label >>>
    const nameLabelText = document.createTextNode("Name");
    labelElName.appendChild(nameLabelText);
    Object.assign(labelElName, {
        for: "iname",
    });
    formEl.appendChild(labelElName);

    // Name Input element >>>
    formEl.appendChild(inputElName);
    Object.assign(inputElName, {
        className: "inputs",
        id: "iname",
        name: "name",
        type: "text",
        placeholder: "Name",
        value: ""
    })

而我得到的是：

<input class="inputs" id="iname" name="name" type="text" placeholder="Name">

对于输入和：

<label>Name</label>

对于标签元素。

Answer 1

由于 for 是 JavaScript 中的保留关键字，您需要在 label 元素上使用 htmlFor 属性，如下所示：

Object.assign(labelElName, {htmlFor: "iname"});

或

labelElName.htmlFor = "iname";

如何使用 Object.assign 设置 "value" 和 "for" 属性

How to set the "value" and "for" attribute using Object.assign

javascript

attributes

dom

object