동적으로 생성 된 요소에서 contenteditable이 작동하지 않습니다.

Question

정렬되지 않은 목록을 동적으로 만들고 단추 하나를 클릭하여 항목을 추가하고 있습니다. contenteditable 속성이 true로 설정된 섹션에이 값을 추가합니다. 그러나, 나는 그것이 작동 보이지 않습니다. contenteditable 속성을 목록에서도 true로 설정했는데 추가 된 섹션에서 그 속성을 상속 받았다고 생각됩니다. 내가하는 일의 코드는 다음과 같습니다. 여기

// create text input 
var categoryInput = document.createElement('input') 
// create button to add the text entered to a list 
var btnAddToList = document.createElement('input'); 
btnAddToList.type ="button"; 
//create a section to add a list to 
var section = document.createElement('section'); 
var ul=document.createElement('ul'); 
section.appendChild(ul); 
section.contenteditable = "true"; 
ul.contenteditable = "true"; 
//create an event handler to add to the list 
if (btnAddToList.addEventListener) { btnAddToList.addEventListener('click', function() { addToList(ul, categoryInput.value);}); 
} else if (btnAddToList.attachEvent) { 
btnAddToList.addEvent('click', function() { addToList(ul, categoryInput.value);}); 

내가 잘못 여부를하고있는 중이 야 내가

function addToList(unorderedlist, inputText) { 

    if(inputText.length == 0) { 
     alert("Add Text"); 
     return; 
    } 


    var listitem = document.createElement('li'); 
    var listvalue = document.createTextNode(inputText); 
    listitem.appendChild(listvalue); 
    unorderedlist.appendChild(listitem); 
} 

를 호출하는 기능입니다? 어떤 도움을 주셔서 감사합니다. 감사합니다

Answer 1

이 속성을 설정할 필요가 없습니다 재산 :

section.setAttribute('contenteditable', 'true'); 

대신

section.contenteditable = "true"; 

jQuery를의 맥락에서 일부 추가 정보를 here 및 here (,하지만 화려하게 주제를 다루고 그럼에도 불구하고).

속성의 속성은 마크 업 (id, class, contenteditable 등)을 통해 설정할 수있는 속성 인 반면, 속성은 DOM 노드를 나타내는 실제 자바 스크립트 객체의 속성입니다. 링크 된 기사에서 언급했듯이,이 둘은 종종 브라우저에 의해 동기화 상태로 유지되는 경우가 많습니다.

편집 : 위의 작업 (속성 설정)이 작동하는 동안 실제 문제는 속성의 이름이 잘못 처리된다는 것입니다. 그것은이어야합니다

속성을 설정하는 이유는 속성이 대소 문자를 구분하지 않기 때문입니다.

Answer 2

속성은 contentEditable (대문자 'E')이며 contenteditable이 아닙니다.

section.contentEditable = "true";