dom操纵

Question

我使用 jquery 并希望在下面写

    //this is a template
     <div class='main'>
    <div class='header'>Some Text</div>
    <div class='data'>
    // data goes here
    </div>
    </div>

// dom

 --------dom here-------------
<div id='red1' class='red'></div>
-----more dom (template is here)------------

我想要的是，将模板绑定到任何元素（比如说id = red1），得到的dom如下所示

//下面是新的dom

    --------dom here-------------
     <div class='main'>
    <div class='header'>Some Text</div>
    <div class='data'>
// element is wrapped with template
    <div id='red1' class='red'></div>
    </div>
    </div>
-----more dom (**template is still here**)------------

Answer 1

类似的东西：

// Capture the wrapper template html
var wrapper = $('<div class="main"><div class="header">Some Text</div><div class="data"></div></div>');

// Then replace the "red1" div with the wrapper and since the replaceWith 
// method returns the replaced element, you can just append it right back to your data div  
$('#red1').replaceWith(wrapper).appendTo(wrapper.find('.data'));

Answer 2

jQuery没有内置的模板机制，但是有很多JavaScript库可以提供它。 mustache.js是我喜欢的人。 Underscore.js，它是jQuery的一个很好的补充，也有一个简单的模板函数。

Answer 3

听起来您可以使用wrap函数将模板包装在具有该ID的div周围。