首页 / JAVASCRIPT / javascript如何实现字符串动态创建dom实例详解

javascript如何实现字符串动态创建dom实例详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript如何实现字符串动态创建dom实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1653字，纯文字阅读大概需要3分钟。

内容图文

在javascript里面动态创建标准dom对象一般使用： 
var obj = document.createElement('p');

然后再给obj设置一些属性。
但是，在实际使用过程中，有些人可能会想，要是能这样创建标准的dom对象就好了
伪代码：var obj=strToDom('<p id="p_1" class="p1">Hello World!</p>');
那么今天的目的就是教大家怎么去实现一个这样的方法用来把字符串直接转换为标准的dom对象

start：
其实实现这样的一个转换是很简单的，这里主要是利用了一个属性innerHTML.
innerHTML，我相信大家都使用过，特别是动态往一个元素里面插内容时使用，这里我还是在介绍下innerHTML，方便于还不太熟悉的人。
innerHTML不是w3c标准，是由ie发明创造出来的，但是由于这个属性的方便性，和当时微老大的地位，其它非ie浏览器也内置了innerHTML并给出了支持。
虽然innerHTML不是w3c标准，但是却是一个事实标准，这个事实标准很重要，也就是目前主流浏览器都支持innerHTML，自然就做到了兼容多浏览器。 

function parseDom(arg) { 
　　 var objE = document.createElement("p"); 
　　 objE.innerHTML = arg; 
　　 return objE.childNodes; 
};

短短几行代码就实现了转换，我们首先用标准的方法创建一个p出来，在用innerHTML来插入一个元素，其实也就是利用浏览器自己的内核算法来实现的一个转换。在用childNodes返回出来。
这样我们就完成了一个字符串到标准dom的转换，巧妙的利用浏览器本身的算法，可以用简单少量的代码来完成大量复杂的转换，我们不用去解析字符串，而是交给浏览器自己来完成，这样既准确又无误。
使用： 

var obj=parseDom('<p id="p_1" class="p1">Hello World!</p>'); 
var obj=parseDom('<p id="p_1" class="p1">Hello World!</p><span>多个也没关系</span>');

注意：
childNodes返回的是一个类似数组的list。所以如果是一个元素，要使用这个dom需要这样使用obj[0]。如果是多个同级的dom转换，可以这样使用obj[0]、obj[1]…

以上就是javascript如何实现字符串动态创建dom实例详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的javascript如何实现字符串动态创建dom实例详解全部内容，希望文章能够帮你解决javascript如何实现字符串动态创建dom实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/299461.html

来源：【匿名】