javascript kullanarak div içinde çoklu span oluşturma

Question

Bir resmim var, o resme tıklarken bir metin kutusu ve bir düğme alıyorum. Düğmeye tıklayarak, bu metin kutusu değerlerini id demo ile bir div içindeki ayrı bir alana yerleştirmek istiyorum. Ho Sadece javascript kullanarak yapabilir miyim? İşte

Ben iyi olur jQuery kullanmak (Öyle hata sürü olmalıdır çalışıyorum)

function addTag(){ 

      var text = document.getElementById('title').value; 
      //console.log(text); 
      var demoid = document.getElementById('demo'); 
      console.log(demoid); 

      var spa = document.createElement('span'); 
      spa.id = text; 
      spa.appendChild(demoid); 
      var text = text+' , '; 
      spa.innerHTML = text; 
      console.log(spa.id); 

      jQuery("#form_panel").hide(); 
      jQuery("#someID").hide(); 

      console.log("in addTag"); 

     } 

Answer 1

deneyin

var newSpan = document.createElement('span'); 

doğru yerde DOM ağacına ekleyin, 'demo' div içinde söylemek :

document.getElementById('demo').appendChild(newSpan); 

Yani bu div bir süre içinde bir metin kutusu:

var newTextbox = document.createElement('input'); 
newTextbox.type = 'textbox'; 
var newSpan = document.createElement('span'); 
var demodiv = document.getElementById('demo'); 

newSpan.appendChild(newTextbox); 
demodiv.appendChild(newSpan); 

console.log(demodiv.innerHTML); 

Konsol dönüşleri:

<span><input type=\"textbox\"></span> 

alternatif HTML tam bir yığın oluşturmak için (performans değişebilir):

document.getElementById('demo').innerHTML += "<span><input type='textbox'></span>"; 

- düzenleyin kod gördükten sonra -

spanElement.appendChild(divElement) yapıyorsunuz, ancak bu, aralığın içine div yerleştirmeye çalışıyor. Açıklığı div'a eklemek istediğinizde divElement.appendChild(spanElement)'a ihtiyacınız var.

Answer 2

aynı çalışıyordu hangi fonksiyonudur.

$ .add() veya $ .append() işlevlerini kullanabilirsiniz.

Daha fazla bilgi için https://api.jquery.com/append/ adresini ziyaret edin.

Bu yardımcı olur umarım!

Answer 3

Javascript işlevlerini kullanarak createElement() ve appendChild() sizin için çalışacaktır. javascript Span öğesi oluşturmak için

$('button').on('click',function (e) { 
    $('#demo').append('<span>'+$('textbox').val()+'</span>'); 
}); 

Answer 4

: jQuery kullanarak aşağıdaki gibi