使用javascript在div中創建多個跨度

Question

我有一個圖像，當我點擊該圖像時，我得到一個文本框和一個按鈕。通過點擊按鈕，我想把這個文本框的值放在一個帶有id demo的div中的單獨跨度中。 何我能做到這一點只使用JavaScript？

這裏是我試圖相同（我試圖所以很多錯誤，必須在那裏）

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

試着像使用jQuery如下：

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

Answer 2

您更好的使用jQuery的功能。

您可以使用$ .add（）或$ .append（）函數。

欲瞭解更多信息，請訪問https://api.jquery.com/append/。

希望這會幫助你！

Answer 3

使用Javascript功能createElement()和appendChild()將爲您工作。

Answer 4

使用JavaScript創建一個span元素：

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

將其添加到正確的地方DOM樹，說 '示範' DIV中：

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

所以在該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); 

控制檯收率：

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

另一種方法是構建HTML的一個完整的組塊（性能可能會發生變化）：

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

- 看到您的代碼後編輯 -

它看起來像你在做spanElement.appendChild(divElement)，但是這是試圖在跨度內插入div。你想插入span的跨度，所以你需要divElement.appendChild(spanElement)。