在 JS 中创建属性会触发异常'not a function'

Question

我使用js来改变内容输入的div的内容，我想使用它们与Ajax，我已经使用Firefox scratchpad调试了这个函数:

function show(id){
var div = document.getElementById('com');
div.innerHTML = '';
var input1 = document.createElement('input')
            .createAttribute('type').setAttribute('type', 'hidden')
            .createAttribute('value').setAttribute('value',id )
            .setAttribute('name','id' );
var input2 = document.createElement('input')
             .createAttribute('type').setAttribute('type', 'input')
             .createAttribute('name').setAttribute('name', 'com');
var btn = document.createElement('button')
          .createAttribute('onClick').setAttribute('onClick', 'post()');
btn.innerHTML = 'Comment';
div.appendChild(input1).appendChild(input2).appendChild(btn);
}

我得到的是:

/*
Exception: document.createElement(...).createAttribute is not a function
@Scratchpad/2:2
*/

我什么都不懂，有什么想法吗?

Answer 1

我相信.createAttribute()属于document，而不是单独的元素，所以这就解释了错误:.createElement()返回一个元素，而该元素没有.createAttribute()的功能。

但是您不需要在调用.setAttribute()之前使用.createAttribute()，因为后者将在不存在的情况下创建元素属性。然而，我认为.setAttribute()返回undefined，所以你不能真正链接它。试着一步一步来:

var input1 = document.createElement('input');
input1.setAttribute('type', 'hidden');
input1.setAttribute('value',id );
input1.setAttribute('name','id' );
// etc.

Answer 2

基本上，异常表示没有名为"createAttribute"的函数。这是正确的:

.createAttribute()是document的函数:https://developer.mozilla.org/en-US/docs/DOM/document#Methods

所以函数不能像你想的那样链接起来。你必须单独给他们打电话。无论如何，"createAttribute"不应该再被使用了(参见使用createAttribute vs.直接设置属性?)

function show(id){
    var div = document.getElementById('com');
    div.innerHTML = '';
    var input1 = document.createElement('input');
    input1.setAttribute('type', 'hidden');
    input1.setAttribute('value',id );
    input1.setAttribute('name','id' );
    var input2 = document.createElement('input');
    input2.setAttribute('type', 'input');
    input2.setAttribute('name', 'com');
    var btn = document.createElement('button');
    btn.setAttribute('onClick', 'post()');
    btn.innerHTML = 'Comment';
    div.appendChild(input1).appendChild(input2).appendChild(btn);
}