javascript - 使用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);

控制台 yield :

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

另一种方法是构建一个完整的 HTML block (性能可能会有所不同):

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

-- 看到你的代码后编辑--

看起来您正在执行 spanElement.appendChild(divElement)，但这是在尝试将 div 插入到 span 中。您想要将 span 插入到 div 中，因此您需要 divElement.appendChild(spanElement)。