javascript - 使用jQuery将对象插入到innerHTML之前的其他对象中

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 个跨度 - 在 HTML 之前为 1.5，在 HTML 之后为 1.5，所以它最终看起来像这样：

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

此代码将找到具有“工具提示”类的所有元素并添加到跨度中。

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');