js에서 create 속성을 사용하면 'not a function'이 발생합니다.

Question

저는 Ajax에서 사용하려는 div의 내용을 js로 변경하려고합니다. Firefox 스크래치 패드를 사용하여이 함수를 디버깅했습니다.

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"라는 기능이 없다는 예외가 있습니다. 그리고 그것은 올바른 : 당신이 그것을 수행하려고 같은 기능이 체인 수 없습니다 https://developer.mozilla.org/en-US/docs/DOM/document#Methods

:

.createAttribute()는 document의 함수이다. 개별적으로 전화해야합니다. 어쨌든 "createAttribute"는 더 이상 사용하지 말아야합니다 (Using createAttribute vs. just setting the attribute directly? 참조).

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); 
}