使用javascript在div中創建多個span

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

要在javascript中創建span元素：

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

將它添加到正確位置的DOM樹中，比如在'demo'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) ，但是這是試圖在span中插入div。 您希望將span插入div，因此需要divElement.appendChild(spanElement) 。

Answer 2

嘗試使用jQuery：

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

Answer 3

使用Javascript函數createElement()和appendChild()將適合您。

Answer 4

你最好使用jQuery。

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

有關更多信息，請訪問https://api.jquery.com/append/ 。

希望對你有幫助！！