javascript - 通过div而不使用.text()编写文本

我又有一个很简单的问题，我找不到答案。

我使用的是Jquery函数.text（）来在动态创建的div上的mouseenter上编写文本。我意识到这仅适用于Iceweasel，例如不适用于Chrome。而是在人们建议使用.val（）的所有地方使用ot .text（），但由于div没有以前的文本值，我似乎无法确切地知道如何在实现中使用它。

请在下面找到一个简单的代码，并带有.text（）来理解该问题。

(function(){
    for (var i = 0; i < 3; i++) {
        var span = document.createElement("span");
        span.innerHTML = "<img width=\"" + data.size[i][0] + "\" height=\"" + data.size[i][1] + "\" id=\"" + i + "\">";
        span.style.position = "absolute";
        span.style.left = data.coords[i][0] + "px";
        span.style.top = data.coords[i][1] + "px";
        document.body.appendChild(span);
    }
}());

for (var i=0; i<3; i++) {
    $('#' + i).mouseenter(function() {
         $(this).text("text");
    });
    $('#' + i).mouseleave(function() {
         $(this).text("")
    });
}

http://jsfiddle.net/ckpx6esj/1/

我希望有人能给我一个想法，如何应用.val（）或完全使用其他方法使此功能也适用于chrome。

最好的问候，并在此先感谢！

最佳答案

我认为不要弄乱for循环的最聪明的方法是，添加一个包含文本的<p>标记，并在mouseleave上将其删除：

for (var i=0; i<3; i++){
                $('#' + i).on("mouseenter",function() {
                        $(this).parent().append("<p>text</p>");
                    });
                $('#' + i).on("mouseleave",function() {
                        $(this).parent().find("p").remove();
                });
}

小提琴：

http://jsfiddle.net/ckpx6esj/2/

此外，文本不起作用，因为您正在听image（<img>）而不是span。图片没有.text()原型，因此，如果要使用parent()原型，则应访问其<span>（在这种情况下为.text()），但是在父级上使用.text()会删除图片，因此可以添加文本并稍后将其删除。