create multiple span innerhalb div mit Javascript

Question

Ich habe ein Bild, wenn ich auf das Bild klicke, bekomme ich eine Textbox und eine Schaltfläche. Durch Klicken auf die Schaltfläche möchte ich diese Textbox-Werte in separate Spannen innerhalb eines Div mit ID-Demo setzen. Kann ich das nur mit Javascript tun? Hier

ist die Funktion, in der ich das gleiche versuchte (Ich versuche, so viele Fehler muss es sein)

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

Versuchen Sie, wie mit folgenden jQuery:

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

Answer 2

Sie besser jQuery verwenden.

Sie können $ .add() - oder $ .append() - Funktionen verwenden.

Besuchen Sie https://api.jquery.com/append/ für weitere Informationen.

Hoffe, das wird dir helfen !!

Answer 3

Die Javascript-Funktionen createElement() und appendChild() funktionieren für Sie.

Answer 4

Um ein span-Element in Javascript zu erstellen:

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

es den DOM-Baum an der richtigen Stelle hinzufügen, sagt in der 'Demo' div :

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

So eine Textbox in einer Spanne in diesem div:

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

Konsole liefert:

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

Die Alternative ist ein komplettes Stück von HTML zu konstruieren (Leistung variieren kann):

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

- Bearbeiten, nachdem Sie den Code zu sehen -

Es sieht aus wie Sie spanElement.appendChild(divElement) tun, aber das versucht, das div innerhalb der Spanne einzufügen. Sie möchten den Bereich in das Div einfügen, so dass Sie divElement.appendChild(spanElement) benötigen.