javascript - 不使用 .text() 在 div 上写入文本

Question

我又遇到了一个相当简单的问题，但我找不到答案。

到目前为止，我正在使用 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。

提前致以最诚挚的问候和感谢!

Answer 1

问题在于您将文本放入图像标签中!

<img>Some text</img>

这是无效的 HTML，请参阅 this answer .

如果您想在图像上添加文本，我建议使用带有 background: url(...) 的 div 。

Updated fiddle .