HTML5 동적 텍스트 상자의 배열을 만들고 텍스트 상자의 텍스트를 설정

Question

나는 다른 값으로 동적으로

<div id = "rightbox" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    <div><input type="text" id="appleword" value="apple" class="textbox" readonly="ture" draggable="true" ondragstart="drag(event)"></div> 
    <div><input type="text" id="orangeword" value="orange" class="textbox" readonly="ture" draggable="true" ondragstart="drag(event)"></div> 
    <div><input type="text" id="peachword" value="peach" class="textbox" readonly="ture" draggable="true" ondragstart="drag(event)"></div> 
</div> 

요구는 (배열)과 유사한 텍스트 상자를 만드는 데 도움이 텍스트 상자에 표시되는 단어의 목록 사업부가 .

Answer 1

var words = ['apple', 'orange', 'peach'], // add more to array if needed 
    newInputs = document.createDocumentFragment(); // fragment to collect new inputs 

// Loop through array of words and generate inputs 
words.forEach(function (word) { 
    var wrapper = document.createElement('div'), 
     fieldSet = document.createElement('fieldset'), 
     input = document.createElement('input'); // Inputs default to type=text 

    // Decorate elements with needed attributes here (abbreviated) 
    wrapper.id = word + 'word'; 
    input.id = word + 'input'; 
    input.setAttribute('value', word); 
    input.setAttribute('class', 'textbox'); 
    input.readOnly = true; 

    // Nest all these elements and add them to the fragment 
    newInputs.appendChild(wrapper).appendChild(fieldSet).appendChild(input); 
}); 

// Insert the fragment into the DOM 
document.getElementById('rightbox').appendChild(newInputs) 

누락 된 속성 및 이벤트 처리기를 추가하는 데 필요한 코드를 조정하십시오. IE9보다 오래된 버전을 지원해야하는 경우 forEach 루프를 for 루프로 변경하십시오.