Question

在我正在创建的应用程序中，我允许最终用户在jQuery倒计时中添加“Text Formatting”前缀和后缀。
倒计时的元素使用AJAX获取，并使用jQ插入DOM。

这两个字段的示例可以是：
前缀：<span style="color:blue">
后缀：</span>

我需要做的是包装这两者之间倒计时所需的所有代码但是当我尝试添加它们时，我尝试过的所有jQuery方法（append＆amp; prepend）和PrototypeJS'Element.insert()将关闭前缀中的所有开放标记，使后缀无效。

我甚至尝试了以下内容：

$( this ).parent().html( data['prefix'] + $( this ).parent().html() + data['suffix'] );

这导致元素从DOM树中删除。在将其推回.html()之前，还尝试在本地存储innerHTML并进行操作。

我无法将这两个字段组合在一起，并在其上使用.wrap()，因为它们中的任何一个都可以是完全完美的HTML字符串。

<span class='tag'>This is a tag</span>

如果我尝试使用.wrap()，我会假设我的其余代码最终会在其中。

Answer 1

我会使用.wrap()，但首先检查它是否为完整标记：

var openTag = prefix.split（''）[0] .slice（1）; //导致'span'或'div'之类的东西 var closingTagExists = prefix.slice（prefix.length - openTag.length - 3）==='';

如果（closingTagExists）{ myEl.before（前缀）。经过（后缀）; }其他{ myEl.wrap（前缀）; }

以下是一个实例：http://jsfiddle.net/xPb2a/

Answer 2

您无法使用.html（）：

插入未关闭的标记

http://bugs.jquery.com/ticket/5317

你可以做这样的事情：

function GetCodeFromServer(){ /*...*/ return "code from server"; }

function Build(){
  var code = GetCodeFromServer();
  var $myTag = $("<span />").append(code);
  //if you want append to any container
  $("#anyDivContainer").append($myTag);
 }

试一试： http://jsfiddle.net/jlrvpuma/59ts8/

Answer 3

试试这个插件：

$.fn.surroundWith = function( a,b ) {  

    return this.each(function() {

          var id='dummy'+$.now();

          $('<div class="'+id+'">'+a+'<span class="'+id+'"/>'+b+'</div>')
           .insertAfter(this)
            .find('span.'+id)
              .replaceWith(this)
               .end()
               .replaceWith(
                            function() {
                            return $(this).contents();
                            });

    })};

不是使用wrap（）而是在目标之后注入一个片段，这个片段是这样构建的：

$(prefix+placeHolder+suffix)

插入此片段后，占位符元素将被目标替换。

您可以在此处测试：http://jsfiddle.net/doktormolle/yUAVk/

jQuery：将未封闭的HTML附加并添加到元素中

3 个答案: