最近封装了一个开源框架，写了500行，已经具备了jquery的大部分常用功能。稍后，工具功能和MVVM双向驱动器等大量功能将被扩展。jquery的用法和jquery完全一样。几乎jquery的所有选择器都可以支持它。为什么和这篇文章的主题有关？因为本文讲的是我在编写框架过程中遇到的一个问题，封装jquery的after方法支持DOM和html标签两种用法，html标签作为参数传递。我想把html解释成DOM结构，用DOM方法插入。

首先，我们编写一个通用的html标签:

div onclick=' test()；'name='test' id='test '这是一个测试字符串/div

这个html包括事件、样式、属性和内容。

然后我们有规律地匹配这个html的每个部分。我们需要的是：

1.标签名，因为创建dom节点时需要它

2.属性和内容应该分开

为了创建dom，我们用一个json保存它，比如这个标签，我们想要处理的最终结果是：

{id:'testinner: '这是一个测试字符串： ' test ' onclick : ' test()；style: ' color:red背景：绿色；Tag:'div'}如果您有这个结构，只需获取相应的键和值，并将它们组装到dom中

var o=document . create element(obj[' tag '])；o . innerHTMl=obj[' inner ']；删除obj[' inner ']；删除obj['标记']；for(obj中的var键){ o.setAttribute(key，obj[key])；} document . body . appendchild(o)；解释很清楚，所以我们必须首先用正则表达式匹配html标记的每个部分

var re=/(w s*)(w [=][''](。*)?['']s*)*(。*)?/ w/；var str=' div onclick=' test()；name='test' id='test '这是一个测试字符串/div；var RES=str . match(re)；

这是我们匹配的结果。从图中可以看出，

Res[1]存储标签名，只需删除两边的空格

Res[2]存储属性和值。我们用split函数按空格切一次，再用split函数按'='切一次，可以分解

Res[4]存储字符串的内容

在上面的三个部分中，您可以通过使用循环和字符串进行一些处理来获得目标结果

那么完整的处理代码是：

var re=/(w s*)(w [=][''](。*)?['']s*)*(。*)?/ w/；var str=' div onclick=' test()；name='test' id='test '这是一个测试字符串/div；var RES=str . match(re)；var tagName=null，attrList=[]，arr=[]，obj={ }；if(res[1] ) { tagName=res[1]。trim()；obj['tag']=标记名；} if(RES[4]){ obj[' inner ']=RES[4]；} if (res[2] ) { attrList=res[2]。拆分(/ s/)；for(var i=0，len=attrList.length我透镜；i ){ arr=attrList[i]。split('=')；//console . log(arr)；obj[arr[0]]=arr[1]。replace(/(^['')|[ ' ']$)/g，function(){ return“”；} );} } var o=document . create element(obj[' tag '])；o . innerHTMl=obj[' inner ']；删除obj[' inner ']；删除obj['标记']；for(obj中的var键){ o.setAttribute(key，obj[key])；} document . body . appendchild(o)；你可以自己封装一个函数。我相信你可以很容易地封装它。

上面的【js大师之路】HTML标签说明了DOM节点的实现方式是边肖共享的全部内容。希望能给大家一个参考，支持我们。