jquery - 使用 html Mustache.js 模板的 JQuery 包装元素

Question

在我的页面上，我有一个可以称为 myobject 的元素。

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

我想在 DOM 中创建上面的代码，其中包含myobject这段代码。

所以上面会变成：

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

理想情况下，具有“outter”类的图像将具有来自 img 元素的所有样式元素，但这并不像将其插入我的模板那么重要。

Answer 1

考虑到您使用的是模板（Mustache.js？），您可以myobject像这样将您的模板添加到您的脚本中：

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

对于非模板路由，您可以使用 jQueryappend()方法在 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 2

我会尝试回答这个问题，但不太了解它应该如何工作？

假设它不是模板系统/插件，重点是用一个元素替换花括号，同时移动 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元素中。

​</p>

Answer 3

您可以使用三重胡须：{{{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"/>"})); 

Answer 4

查看.before()和.after( )

所以...您的代码如下所示：

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