Question

所以我有一个快速的给你 - 它看起来非常直接...

这是我当前的工具提示：

<div class="tooltip" style="position: absolute; top: 1298px; left: 382.5px; display: none; ">this is where the tooltiip text goes. You are quite the cool!</div>

忽略它有一秒内联css的事实（对不起）......

好的，所以我需要在其中插入3个跨度 - 1.5之前和1.5之后的HTML，所以它最终看起来像这样：

<div class="tooltip" style="position: absolute; top: 1298px; left: 382.5px; display: none; "><span class="tooltop"></span><span class="toolmid">this is where the tooltiip text goes. You are quite the cool!</span><span class="toolbot"></span></div>

但当然不知道最好的方法......

基本上它看起来像这样：

（现有div）（开始跨度/）（中跨）[现有innerHTML]（/中跨）（结束跨度/）（/现有div）

不知道。

Answer 1

您可以wrapAll现有内容，然后prepend顶部和append底部

var tooltip = $('.tooltip');                            //cache tooltip

tooltip.contents().wrapAll('<span class="toolmid" />'); //wrap existing contents
tooltip.prepend('<span class="tooltop">');              //prepend the top
tooltip.append('<span class="toolbot">');               //append the bottom

Answer 2

试试这个......

HTML

<div class="tooltip" style="position: absolute; top: 1298px; left: 382.5px; display: none; ">this is where the tooltiip text goes. You are quite the cool!</div>

的JavaScript

$(".tooltip").each(function(index, tooltip) {
    tooltip.innerHTML = '<span class="tooltop"></span><span class="toolmid">' + tooltip.innerHTML + '</span><span class="toolbot"></span>';
});

此代码将找到带有“tooltip”类的所有元素，并添加到跨度中。

Answer 3

$('.existing-div-selector')
    .append(
        $('<span class="tooltop"></span><span class="toolmid">' + someContentVariable + '</span><span class="toolbot"></span>')
    );

jQuery允许您从字符串构建DOM片段，它将解析并从中创建DOM元素。

Answer 4

$('<span class="tooltop"></span><span class="toolmid">' + someContentVariable + 
            '</span><span class="toolbot"></span>').
                         appendTo('your_div_selector');

使用jQuery在innerHTML之前将对象插入到其他对象中

4 个答案: