jQuery由字符串动态创建元素

操作DOM对象来插入数据
如果要插入的数据刚好是在某个标签或属性内，可以使用操作DOM对象的方式来插入数据：

function get_passenger_html(passenger) { 
     
    var html = $('#passenger-template').html(); // 获取HTML字符串模板 
    var dom = $(html); // 先即将HTML字符转成DOM对象 
    dom.find('.name').html(passenger.name); // 找到存放乘客姓名的DOM节点并插入数据 
    dom.find('.tel').html(passenger.tel); // 找到存放乘客电话的DOM节点并插入数据 
    // 把处理完毕的DOM转回HTML字符串并返回 
    return dom.prop("outerHTML");  
}

注意点&细节解析
如果模板不是clone()得来的，要先用$(html)将HTML字符串转成DOM对象，然后才能用find()去找到对应的DOM节点来操作哦。

html()方法只能获取子元素的HTML字符串，要获取包括自己的HTML字符串的话，要去读取outerHTML属性，这是个DOM对象原生的属性，所以要用prop()才能获取得到哦。

二、替换自定义的占位符成指定数据
第一步先安照前面讲到的模板分离原则，定义了一个模板。在定义这个模板的时候，顺带添加一些带有特殊含义的占位符：{name}和{tel}。

<script id="passenger-template" type="text/html">
    <ul class="passenger-list">
        <li>
            乘客姓名：
            <span class="name">{name}</span>
        </li>
        <li>
            乘客电话：
            <span class="tel">{tel}</span>
        </li>
    </ul>
</div>

第二步就是利用String.replace()逐个替换掉这些自定义的占位符：

function get_passenger_html(passenger) {
    
    var html = $('#passenger-template').html(); // 获取HTML字符串模板
    // 用乘客姓名替换掉我们自定义的占位符
    html = html.replace(passenger.name, '{name}'); // 替换姓名占位符
    html = html.replace(passenger.tel, '{tel}'); // 替换电话占位符
    
    return html;
}

注意点&细节解析
占位符的边界要特殊一点，例如用{和}，这样子就能避免在替换的时候，把其他有相似的字符被抹掉了。