дом манипуляции

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 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

Похоже, вы могли бы использовать функцию wrap , чтобы обернуть шаблон вокруг div с этим идентификатором.

Answer 3

jQuery не имеет встроенного механизма шаблонов, но есть много JavaScript-библиотек, которые его предоставляют. mustache.js мне нравится. Underscore.js , который является хорошим дополнением к jQuery, также имеет простую функцию шаблона.