jQuery由字符串动态创建元素
2020-01-01 23:16:59
990次阅读
0个评论
操作DOM对象来插入数据
如果要插入的数据刚好是在某个标签或属性内,可以使用操作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;
}
注意点&细节解析
占位符的边界要特殊一点,例如用{和},这样子就能避免在替换的时候,把其他有相似的字符被抹掉了。
00