Question

我正在JS中创建HTML输入元素，然后将其插入DOM。但是，插入后，JS元素对象不会引用新的DOM元素。

元素类型按钮元素和输入类型“提交”也可以使用，但是输入元素似乎不适用于我要使用的“数字”或“文本”。

let parent = document.createElement('div');
let child = document.createElement('div');
let childInput = document.createElement('input');
childInput.type = 'text';
childInput.value = 'foobar';

child.append(childInput);
parent.append(child);
document.body.append(parent);

没有错误，但是在chrome开发工具中，当类型设置为文本或数字时，我可以看到JS元素对象未绑定到DOM对象作为输入。该元素是插入到DOM中的元素，但是它不反映JS对象引用，并且该值也没有插入到DOM元素中，类，id等也不会插入。

编辑：而且，当使用appendChild函数时，它也不起作用。

Answer 1

听起来您正在尝试通过设置JavaScript属性来更改HTML属性，但这并不总是有效的。您可以使用myElement.setAttribute(attributeName, newValue)来使用JavaScript更改HTML属性（和myElement.propertyName = newValue来更改JavaScript属性。）

请注意，value属性的初始值反映在defaultValue属性中。（还有其他一些奇怪的属性名称，例如JS中的保留字与HTML术语冲突。）

还要注意，HTML属性不区分大小写，而JS属性是区分大小写的，并且kebab-case属性映射到camelCase属性。

关于此的更多信息，可以在这里找到：https://javascript.info/dom-attributes-and-properties

let parent = document.createElement('div');
let child = document.createElement('div');
let childInput = document.createElement('input');
childInput.type = 'text';
childInput.id = 'initialId';
childInput.classList.add('someClass');
childInput.defaultValue = 'initial value';
child.append(childInput);
parent.append(child);
document.body.append(parent);

// Initial attributes
let insertedChild = document.getElementById('initialId');
console.log(insertedChild.outerHTML);

// Modified attributes
insertedChild.setAttribute('id', 'changedId');
console.log("`id` property (reflected from attribute): " + insertedChild.id);
insertedChild.setAttribute('value', 'changedValue');
console.log("`value` property (reflected from attribute): " + insertedChild.value);
console.log(insertedChild.outerHTML);

Javascript元素对象未引用DOM Input元素

1 个答案: