Javascript 不使用.text（）在div上写入文本

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

到目前为止，我一直在使用Jquery函数.text（）在动态创建的div上的mouseenter上编写文本。我逐渐意识到，这只适用于我的Iceweasel，而不适用于Chrome。取而代之的是ot.text（），人们建议使用.val（），但我似乎不知道在我的实现中如何使用它，因为divs以前没有文本值

请在下面找到一个简单的代码，用.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("") 
    });
}

（函数（）{
对于（变量i=0；i<3；i++）{
var span=document.createElement（“span”）；
span.innerHTML=“”；
span.style.position=“绝对”；
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是设置value属性，它只对页面上的输入字段有影响。是更改元素的内容

.val（）方法主要用于获取表单元素的值
例如输入、选择和文本区域

因此，您应该在代码中使用
text（）
函数

另外，根据您的代码，您可以更改
元素的文本属性。这不好。您应该更改
的文本。因此，只需将您的id移动到
span
元素。
如果您想要与Javascript本机
innerHtml
等效的jQuery，请选择
$（This.html（'text'）；
）

看看这些功能：




或者如果你有冒险精神：


我能想到的最聪明的方法是不破坏for循环，即在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(); 
                });
}

for（var i=0；i问题在于您将文本放入图像标记中

<img>Some text</img>

一些文本

这是无效的HTML，请参阅

如果您想在图像上显示文本，我建议使用
div
和
background:url（…）

.
首先我将使用类id，它将使用第二个循环进行保存，
另外，如果你想同时拥有文本和图像，你可以这样做，但这会有点复杂，我建议在包含文本的跨度中添加一些子元素，我这样做不仅仅是为了挑战

在不更改html元素的情况下更改文本的简单插件

$.fn.selectorText = function(text) {
    var str = '';

    this.contents().each(function() {
        if (this.nodeType === 3) {
            if(typeof(text) === 'string'){
                this.textContent = text;
                return false;
            }else{
                str += this.textContent || this.innerText || '';
            }

        }
    });

    return str;
};


var thisData = [{
    'coords' : [[100,100], [300, 300], [200, 200]],
    'size' : [[30, 30], [30, 30], [30, 30]]
}];
var data = thisData[0];

(function(){

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


$('.spanImage')
  .on( 'mouseenter', function() {
   $(this).selectorText('text');    
  })
  .on( 'mouseleave', function() {
   $(this).selectorText('');
  });
}());

$.fn.selectorText=函数（文本）{
var-str=''；
this.contents（）.each（函数（））{
if（this.nodeType==3）{
如果（文本的类型）=“字符串”）{
this.textContent=文本；
返回false；
}否则{
str+=this.textContent | | this.innerText | |“”；
}
}
});
返回str；
};
var thisData=[{
“coords”：[100100]、[300300]、[200200]，
“大小”：[30,30]，[30,30]，[30,30]]
}];
var数据=此数据[0]；
（功能（）{
对于（变量i=0；i<3；i++）{
var span=document.createElement（“span”）；
setAttribute（'class'，'spanImage'）；
span.style.position=“绝对”；
span.style.left=data.coords[i][0]+“px”；
span.style.top=data.coords[i][1]+“px”；
span.innerHTML=“\n”；
document.body.appendChild（span）；
}
$（“.spanImage”）
.on（'mouseenter'，function（）{
$（this.selectorText（'text'）；
})
.on（'mouseleave'，function（）{
$（this）。选择文本（“”）；
});
}());
为什么使用val（）时它不起作用？怀疑这是
的问题。text（）
-可能是无效的id。
1
不是有效的id值-HTML id必须以字母字符（或下划线）开头。当Chrome等人试图通过该无效id访问元素时，可能无法从DOM中检索该元素。这是因为您忘记为自己设置id。您不能在图像上使用
.text（）
方法。^heh或者-正在
上设置id我正在使用text（），但它在Chrome上不起作用。这就是整个问题。我刚刚为你的整个问题添加了答案。+1表示append和html，似乎是他们应该在这里使用的，在我看来，你不应该在div上使用text或val
$('text').appendTo($(this)); // Performance penalty for creating an object out of 'text'

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(); 
                });
}

<img>Some text</img>

$.fn.selectorText = function(text) {
    var str = '';

    this.contents().each(function() {
        if (this.nodeType === 3) {
            if(typeof(text) === 'string'){
                this.textContent = text;
                return false;
            }else{
                str += this.textContent || this.innerText || '';
            }

        }
    });

    return str;
};


var thisData = [{
    'coords' : [[100,100], [300, 300], [200, 200]],
    'size' : [[30, 30], [30, 30], [30, 30]]
}];
var data = thisData[0];

(function(){

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


$('.spanImage')
  .on( 'mouseenter', function() {
   $(this).selectorText('text');    
  })
  .on( 'mouseleave', function() {
   $(this).selectorText('');
  });
}());