jQuery由字符串动态创建元素
2020-01-01 23:16:59
52次阅读
0个评论
操作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;
}

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

收藏 0 0

登录 后评论。没有帐号? 注册 一个。

程序王

  • 0 回答
  • 0 粉丝
  • 0 关注