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

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

结帐.before()和.after()

所以...你的代码看起来像这样：

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

Answer 3

我会尝试回答这个问题，不知道这应该如何运作？

假设它不是模板系统/插件，并且重点是用一个元素替换卷曲块，同时移动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"/>"}));

使用html Mustache.js模板的JQuery wrap元素

4 个答案: