在我的页面上,我有一个可以称为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元素中的所有样式元素,但这并不像将其插入到我的模板中那么重要。
答案 0 :(得分: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+'"/>");
});
答案 1 :(得分:0)
所以...你的代码看起来像这样:
$("myCoolImage").before("<div class='outter'><div class='somethingElse'><a href='#'>test</a></div>");
$("myCoolImage").after("</div></div>");
答案 2 :(得分:0)
我会尝试回答这个问题,不知道这应该如何运作?
假设它不是模板系统/插件,并且重点是用一个元素替换卷曲块,同时移动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
元素。
答案 3 :(得分:0)
您可以使用三重胡子: {{{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"/>"}));