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)，但是试图在div中插入div。您希望将跨度插入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/了解详情。

希望这会对你有所帮助!!

使用javascript在div中创建多个span

4 个答案: