Utwórz wiele span wewnątrz div przy użyciu javascript

Question

Mam jedno zdjęcie, po kliknięciu na ten obrazek, otrzymuję jeden pole tekstowe i przycisk. Klikając przycisk, chcę umieścić wartości tego pola tekstowego w osobnych zakresach w div z id demo. Ho Mogę to zrobić tylko przy użyciu javascript?

Oto funkcja, w której starałem takie same (Próbuję tak wiele błędów muszą być tam)

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

Spróbuj jak po użyciu jQuery:

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

Answer 2

Lepiej użyć jQuery.

Można użyć funkcji $ .add() lub $ .append().

Odwiedź stronę https://api.jquery.com/append/, aby uzyskać więcej informacji.

Mam nadzieję, że to ci pomoże!

Answer 3

Korzystanie z funkcji Javascript createElement() i appendChild() będzie działać dla Ciebie.

Answer 4

Aby utworzyć element rozpiętości w javascript:

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

dodać go do drzewa DOM w odpowiednim miejscu, powiedzmy wewnątrz 'demo' div :

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

więc pole tekstowe w rozpiętości w tym div:

plony

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

konsoli:

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

Alternatywą jest zbudować kompletny kawałek HTML (wydajność może się różnić):

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

- Edycja po obejrzeniu kodu -

Wygląda na to, że robisz spanElement.appendChild(divElement), ale to jest próba wstawienia div wewnątrz zakresu. Chcesz wstawić span do div, więc potrzebujesz divElement.appendChild(spanElement).