Combining HTML tags with DOM nodes

This time I will bring you the combination of HTML tag and DOM node, what are the precautions for combining HTML tags with DOM nodes, as follows This is a practical case, let’s take a look at it.

Recently, I have been encapsulating an open source framework. I have written 500 lines. It already has most of the common functions of jquery. It will also expand a large number of tool functions and MVVM two-way driver functions later. The usage method is exactly the same as jquery. Almost all jquery selectors are supported. Why does this have anything to do with the theme of this article? Because what this article is going to talk about is a problem I encountered in the process of writing a framework. It encapsulates the after method of jquery and supports two usages of DOM and html tags. The html tag passes parameters. I want to interpret html into a DOM structure. Use DOM method insertion.

First, we write a common html tag:

this is a test string

This html includes events, styles, attributes, and content.

We then use regular expressions to match each part of this html. What we need is:

1. Tag name, because

is needed when creating a dom node 2. Attributes and content must be separated separately

In order to facilitate the creation of dom, we use a json to save it, such as this tag. The final result we want to process is:

{
id:"test
inner:"this is a test string
name:"test"
onclick:"test();"
style:"color:red;background:green;"
tag:"p"
}

If you have this structure, you only need to get the corresponding keys and values ​​and assemble it into a dom.

var o = document.createElement( obj['tag'] );
  o.innerHTML = obj['inner'];
  delete obj['inner'];
  delete obj['tag'];
  for( var key in obj ){
   o.setAttribute( key, obj[key] );
  } 
  document.body.appendChild( o );

The explanation idea is clear, so we must first match each part of the html tag with regular expression

var re = /(.*)?/;
  var str = '<p>this is a test string</p>';
  var res = str.match(re);

Well, this is the result of our matching. As can be seen from the picture,

res[1] stores the label name, you only need to remove the spaces on both sides

res[2] stores attributes and values. We use the split function to cut once by spaces, and then use the split function to cut once by '=' to decompose it.

res[4] stores the content of string

In the above three parts, you can get the target result by just using loops and string processing.

Then the complete processing code is:

var re = /(.*)?/;
  var str = '<p>this is a test string</p>';
  var res = str.match(re);
  var tagName = null, attrList = [], arr = [], obj = {};
  if( res[1] ) {
   tagName = res[1].trim();
   obj['tag'] = tagName;
  }
  if( res[4] ) {
   obj['inner'] = res[4];
  }
  if ( res[2] ) {
   attrList = res[2].split( /\s+/ );
   for( var i = 0, len = attrList.length; i 

You can encapsulate a function by yourself. I believe you can easily encapsulate it. 
 I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website! 
 Recommended reading: 

The above is the detailed content of Combining HTML tags with DOM nodes. For more information, please follow other related articles on the PHP Chinese website!