html Mustache.jsテンプレートを使用したJQueryラップ要素

Question

私のページには、myobjectという名前の要素があります。

<div class="outter"> 
<div class="somethingElse"><a href="#">test</a></div> 
{{myobject}} 
</div> 
</div> 

私は、このコードの内部myobjectと上記DOMでコードを作成したいです。

したがって、上記のなる：

<div class="outter"> 
<div class="somethingElse"><a href="#">test</a></div> 
<img id="myCoolImage" src="myimage.jpg"/> 
</div> 
</div> 

理想的には、クラス「outter」とのイメージは、img要素からすべてのスタイル要素を持っているだろうが、それはそれは私のテンプレートに挿入したほど重要ではないのです。

Answer 1

.before()と.after()

をチェックしてくださいそう...あなたのコードは次のようになります（？Mustache.js）

テンプレートを使用している考慮

$("myCoolImage").before("<div class='outter'><div class='somethingElse'><a href='#'>test</a></div>"); 
$("myCoolImage").after("</div></div>"); 

Answer 2

あなたにあなたのmyobjectを追加することができますこのようなスクリプト：非テンプレートルートの

$(document.body).on('click', 'button', function(){ 
    var myobject={img: "myimage.jpg"};  
    var output = Mustache.render("<img id="myCoolImage" 
     src={{myobject.img}}/>", myobject);  
}); 

、あなたはjQueryのappend()メソッドを使用する可能性がでsertsこのようなDOM要素の末尾にコンテンツ（HTML）：

<div class="outter"> 
    <some-elements></> 
     ...appended stuff goes after all of "outter"'s child elements.. 
     ... but before its closing tag 
</div> 

とJSはこのようなものになるだろう：

$(document.body).on('click', 'button', function(){ 
    var myobject={img: "myimage.jpg"};  
    $('.outter').append("<img id="myCoolImage" src="'+myobject.img+'"/>");  
}); 

Answer 3

が、私はこれに答えるためにしようよ、について多くを知りませんどのようにこれは動作するはずですか？それはテンプレートシステム/プラグインではない、との点は、要素とcurlybracketsを交換することで、同時にCSSを動かすことを、私はどうなると仮定すると、

：

var img = $("#myCoolImage")[0], 
    css = img.style.cssText, 
    wrapper = $(".outter"), 
    wrapperContent = wrapper[0].innerHTML, 
    placeholder = wrapperContent.match(/{{(.*?)}}/gi); 

wrapper.html(wrapperContent.replace(placeholder, img.outerHTML)).get(0).style.cssText = css; 

はここFIDDLEのですそれがどのように機能しているかをご覧ください。

これはインラインCSS文を移動するだけで、外部スタイルシートまたはスタイルタグに設定されたスタイルを移動する必要がある場合は、JavascriptでcurrentStyle/getComputedStyle関数を調べる必要がありますが、スタイルをクラスに適用し、そのクラスをoutter要素に追加するだけです。

Answer 4

あなたはトリプル口ひげ使用することができます。その後、{{{MyObjectに}}}

をして：

var template = "<div class="outter"> 
<div class="somethingElse"><a href="#">test</a></div> 
{{{myobject}}} 
</div> 
</div>"; 

$("body").append(Mustache.render(template, {myobject: "<img id="myCoolImage" src="myimage.jpg"/>"}));