這次帶給大家HTML標籤與DOM節點結合，HTML標籤與DOM節點結合的注意事項有哪些，下面就是實戰案例，一起來看一下。
最近在封裝一個開源框架，已經寫了500行， 已經具備jquery的大多數常用功能，後面還會擴展大量的工具函數和MVVM雙向驅動等功能。跟jquery的使用方法完全一樣，jquery的選擇器，幾乎都能支持，為什麼說這事，跟這篇文章的主題有毛關係呢？因為這篇文章要講的就是我在寫框架過程中碰到的一個問題，封裝jquery的after方法，支持DOM和html標籤兩種用法，html標籤傳參，我要把html解釋成DOM結構，用DOM的方法插入.
首先，我們寫個通用的html標籤:
#
this is a test string
# 這個html包含了事件，樣式，屬性，內容.
我們接著用正規把這個html的每個部分配對出來，我們需要的是：
1.標籤名， 因為建立dom節點的時候需要
2.屬性和內容都要單獨分離出來
# 為了方便創建dom,我們用一個json保存，例如這個標籤，我們要處理成的最終結果是:
{
id:"test
inner:"this is a test string
name:"test"
onclick:"test();"
style:"color:red;background:green;"
tag:"p"
}如果有了這個結構，只要拿到對應的鍵和值，組裝成一個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 );解釋思路已經明確，那麼我們先要把html標籤的每部分用正規表示式配對出來
var re = /(.*)?/; var str = '<p>this is a test string</p>'; var res = str.match(re);
# 恩，這就是我們配對出來的結果，從圖中可以看出，
res[1]儲存的是標籤名稱，只需要把兩邊的空格去掉
# res[2]儲存的是屬性和值，我們用split函數按空格切割一次，再用split函數按'='切割一次，就能分解出來了
res[4]儲存的就是字串的內容
# 上面3部分，只要用循環和字串稍加處理就可以得到目標結果了
# 那麼完整的處理程式碼就是：
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 #
可以自行封裝一個函數，我相信你應該輕易就能封裝出來吧.
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是HTML標籤與DOM節點結合的詳細內容。更多資訊請關注PHP中文網其他相關文章！
