Onay kutusu ilk olarak neden gösterilmiyor?

Question

HTML

<div id="showTask"> 
<label><input type="checkbox"> One task </label> <br/> 
</div> 
<textarea id="message"> </textarea> <br/> 
<input type="button" value="Add Task" id="add"></input> 

JS çıktısında

var a = document.getElementById('add') ; 
a.addEventListener('click',say,false) ; 

function say() { 
var b = document.getElementById('showTask') ; 
var m = document.getElementById('message').value ; 
var element = document.createElement('label') ; 
var cbox = document.createElement('input'); 
cbox.setAttribute('type','checkbox') ; 
element.appendChild(cbox) ; 
element.innerHTML = m ; 
b.appendChild(element) ; 
var lbreak = document.createElement('br'); 
b.appendChild(lbreak) ; 

} 

sadece etiketin innerHTML gösteriyor, hiçbir onay kutusu seçeneği ekranı vardır. Etiket metninden önce onay kutusunu göstermek istiyorum.

Answer 1

yerine

var a = document.getElementById('add'); 
 
a.addEventListener('click', say, false); 
 

 
function say() { 
 
    var b = document.getElementById('showTask'); 
 
    var m = document.getElementById('message').value; 
 
    var element = document.createElement('label'); 
 
    var cbox = document.createElement('input'); 
 
    cbox.setAttribute('type', 'checkbox'); 
 
    element.appendChild(cbox); 
 
    element.appendChild(document.createTextNode(m)) 
 
    b.appendChild(element); 
 
    var lbreak = document.createElement('br'); 
 
    b.appendChild(lbreak); 
 

 
}

<div id="showTask"> 
 
    <label> 
 
    <input type="checkbox">One task</label> 
 
    <br/> 
 
</div> 
 
<textarea id="message"></textarea> 
 
<br/> 
 
<input type="button" value="Add Task" id="add" />

Answer 2

aşağıdaki pasajı gibi yapabileceği gibi bir metin düğümü eklemek innerHTML kullanarak etiketin içeriğini geçersiz kılıyor ... basit ve kolay anlaşılması

var a = document.getElementById('add') ; 
 
a.addEventListener('click',say,false) ; 
 

 
function say() { 
 
var b = document.getElementById('showTask') ; 
 
var m = document.getElementById('message').value ; 
 
var newInput="<label><input type='checkbox'>"+m+"</label><br/>"; 
 

 
var current_b=b.innerHTML+newInput; 
 
b.innerHTML=current_b ; 
 
}

<div id="showTask"> 
 
<label><input type="checkbox"> One task </label> <br/> 
 
</div> 
 
<textarea id="message"> </textarea> <br/> 
 
<input type="button" value="Add Task" id="add" />