jQuery：要素にクローズしていないHTMLを追加して前に付加する

Question

作成しているアプリケーションで、エンドユーザーがjQueryのカウントダウンに「テキスト書式」の接頭辞と接尾辞を追加できるようにします。
カウントダウンの要素はAJAXでフェッチされ、jQでDOMに挿入されます。

これらの二つのフィールドの例を使用できます
プレフィックス：<span style="color:blue">
サフィックス：私はその後、実行する必要がどのような</span>

は、これら二つの間のカウントダウンのために必要なすべてのコードをラップしています。
私がそれらを追加しようとすると、私が試したすべてのjQueryメソッド（&が前に付加されています）とPrototypeJSのElement.insert()は、接頭辞の中の開いているタグを閉じて、接尾辞を無用にします。

私も次のことを試してみました：

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

これは、DOMツリーから削除された要素になりました。 innerHTMLとフィーリングをローカルに保存してから.html()に戻してみました。

これらの2つのフィールドを組み合わせることはできません。どちらも完全なHTML文字列になるため、.wrap()を使用することはできません。

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

私はその上.wrap()を使用しようとした場合、私は自分のコードの残りの部分は、その内側に終わるだろうと仮定します。

Answer 1

Iは.wrap()を使用し、それは完全なタグであるかどうかを確認するために最初にチェックする：

VAR openTag = prefix.split（」「）[0] .slice（1）。 //結果は 'span'や 'div'のようになります var closingTagExists = prefix.slice（prefix.length - openTag.length - 3）=== "';

if（closingTagExists）{ myEl.before（接頭辞）.after（接尾辞）; } else { myEl.wrap（接頭辞）; }

ここでは実際の例です：

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

てみてくださいあなたは）（.htmlをして閉じていないタグを挿入しないキャンhttp://jsfiddle.net/xPb2a/

Answer 2

それ： http://jsfiddle.net/jlrvpuma/59ts8/

Answer 3

このプラグインを試してください。この断片を挿入した後

$(prefix+placeHolder+suffix) 

、プレースホルダ要素：

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

    })}; 

代わりのラップを使用して（）は、ターゲットの後に断片を注入し、このフラグメントは、このように構築されターゲットに置き換えられます。

あなたはここでそれをテストすることがあります。http://jsfiddle.net/doktormolle/yUAVk/