如何将普通字符串转化为dom节点插入页面
2018-03-13 00:08
435 查看
主要转化原理
将存储在存储在字符串中的XML或HTML解析为一个DOM文档,然后使用parseFromString方法将这个DOM文档转化为一个DOM对象。选择到要插入的节点后使用
append方法插入到对应的位置即可。
有点懵?没关系,继续往下看。
主要操作
创建DOMParser()文档使用parseFromString()方法将DOMParser()文档转化为DOM对象
选择DOM对象中需要的节点对象
将节点对象插入html页面
代码示例
使用parseFromString()方法let str='<h1>Interesting</h1>'; let parser = new DOMParser(); let doc = parser.parseFromString(str, "text/xml"); let node = doc.getElementsByTagName('h1')[0]; $('#test')[0].append(node);
坑点注意
1. parseFromString转化结果
parseFromString转化的结果是一个document对象,无法直接进行插入操作,需提取内部节点后再插入。2. 数据插入表格
在往table标签中插入数据时必须使用
<table></table>标签包裹,否则插入的节点中parseFromString方法会将其中的tr标签和td标签自动删除。
let item=`<table> <tr> <td><input type="checkbox" class="input-chk"> ${i}</td> <td>${v.userId}</td> <td>${v.role.roleName}</td> <td>${v.userName}</td> <td>${v.mobile}</td> <td>${v.email}</td> <td>${v.role.stat}</td> <td><span class="dropdown"><button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-warning dropdown-toggle dropdown-menu-right"><i class="ft-settings"></i></button><span aria-labelledby="btnSearchDrop1" class="dropdown-menu mt-1 dropdown-menu-right high-index"><a href="#" class="dropdown-item"><i class="la la-eye"></i>修改</a><a href="#" class="dropdown-item"><i class="la la-pencil"></i> 删除</a><a href="#" class="dropdown-item"><i class="ft-upload"></i> 冻结</a><a href="#" class="dropdown-item"><i class="la la-trash"></i> 解冻</a><a href="#" class="dropdown-item"><i class="la la-refresh"></i> 重置密码</a></span></span></td> </tr> </table>`; _$('userItemWrap').append((new DOMParser()).parseFromString(item, "text/html").getElementsByTagName('tr')[0]);
END
相关文章推荐
- angular.js 下如何动态插入删除dom节点
- Dom节点对象转化为字符串
- js 中如何把一个普通的字符串转化为数组对象呢
- DOM拷贝一个节点并插入页面
- 如何将org.w3c.dom.Element xml节点对象转化成XML格式的string字符串
- 如果dom节点是动态添加进页面的,在页面节点绑定事件如何解决的问题。
- 站长如何屏蔽流氓宽带商在你的页面里面强行插入的广告代码
- 如何用请求字符串传值给用模式窗口打开的aspx页面。
- C语言中如何将数转化为字符串
- js中如何把字符串转化为对象、数组示例代码
- JavaScript中如何将html字符串转化为Jquery对象或者Dom对象
- 如何将xml的String字符串转化标准格式的String字符串
- 前端js如何生成一个对象,并转化为json字符串
- 21.如何将java类对象转化为json字符串
- 微信小程序中如何从普通页面跳转到tagbar页面
- DOM节点的创建、插入、删除、查找、替换
- Java如何将字符串转化为JSON(json-lib)
- 将普通字符串转化为Unicode编码
- Web_如何在页面中插入java applet?
- JSON字符串如何转化成对象?