在使用javascript創建DOM節點的過程中，難免要使用document.createElement、setAttribute、 document.createTextNode等冗長、還有瀏覽器兼容性問題的節點操作方法，雖然有人提議使用字符串拼接后，再使 用.innerHTML=可以降低創建節點的成本，而且還有更好的性能，但在我印象中innerHTML并不能適應所有需求（具體神馬需求我也忘了），所 以下面給大家介紹一種使用javascript元編程技巧來動態創建節點的方法。
那么什么是元編程呢？了解Ruby的同學知道，Ruby的風靡離不開Ruby on Rails(RoR)框架的推動。RoR框架通過魔幻實現質樸的方式，把很多需要用其他語言實現的功能用Ruby來實現，最經典當屬RoR框架的 ActiveRecord。讓我們看一下下面這段代碼：

person = Person.find_by_email('xxx@x1989.com')
person.age = 23
person.save
上述代碼可以用SQL語句替換，如下所示：

SELECT * FROM person WHERE email = 'xxx@x1989.com'
UPDATE person SET age = 23 WHERE email = 'xxx@x1989.com'
即使不會Ruby和SQL的人也可以看出，采用Ruby語法方式更自然。而正是Rails通過元編程技巧，讓我們無須在一個程序中混用兩種不同的語言。元編程的定義：
<blockquote>元編程是指某類計算機程序的編寫，這類計算機程序編寫或者操縱其它程序（或者自身）作為它們的數據，或者在運行時完成部分本應在編譯時完成的工作。</blockquote>
那么，我希望用javascript實現"create_"+任意HTML5標簽名的動態節點生成函數，比如用create_form、create_div、create_input來生成對應名稱的節點，使用下面的api：

//①創建只含有文本的節點
//<span>hello world</span>
var span = create_span('hello world');
//<br />
var br = create_br();

//②可以在參數1中以對象字面量來定義屬性
//<input type="text" size="20" value="123" />
var input = create_input({
??? 'type': 'text',
??? 'size': 20,
??? 'value': '123'
})
//③用參數2定義文本節點
//<a href="http://www.google.com.hk" title="谷歌搜索" target="_blank" rel="xxxxx" costom_attr="自定義屬性">搜索</a>
var a = create_a({
??? 'href': 'http://www.google.com.hk',
??? 'title': '谷歌搜索',
??? 'target': '_blank',
??? 'rel': 'xxxxx',
??? 'costom_attr': '自定義屬性',
}, '搜索');

//④參數2可以是節點 參數3（可選）是文本節點
//<div><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png">這是logo</div>
var div = create_div({}, create_img({'src': 'http://www.google.com.hk/intl/zh-CN/images/logo_cn.png'}), '這是logo')

//⑤參數2也可以是節點構成的數組
//<ul class="list1"><li>項目1</li><li>項目2</li><li>項目3</li></ul>
var ul = create_ul({
??? 'class': 'list1'
}, [create_li('項目1'), create_li('項目2'), create_li('項目3')]);
實現方式：

void function() {
??? //支持以"create_"+任意HTML5標簽名的動態節點生成函數
??? var doc = document, win = window,
??? //HTML5標簽:
??? tags = ["a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "command", "datagrid", "datalist", "datatemplate", "dd", "del", "details", "dialog", "dir", "div", "dfn", "dl", "dt", "em", "embed", "event-source", "fieldset", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "isindex", "kbd", "label", "legend", "li", "link", "m", "map", "menu", "meta", "meter", "nav", "nest", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "rule", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "tt", "u", "ul", "var", "video", "xmp"];
??? for (var i = 0; tags[i]; i++) {
??????? //閉包是個好東東
??????? win['create_' + tags[i]] = function(tag) {
??????????? return function(attrs, childNode, textNode) {
??????????????? return createNode(tag, attrs, childNode, textNode)
??????????? }
??????? } (tags[i]);女裝品牌排行榜
??? }
??? var createNode = function (tagName, attrs, childNode, textNode) {
??????? //創建以tagName命名的節點
??????? var node = doc.createElement(tagName);

??????? //處理attrs參數 設置節點屬性
??????? typeof attrs === 'string' ? createTextNode(node, attrs) : createAttributeNode(node, attrs); //創建并設置屬性節點
??????? //處理childNode參數 添加子節點
??????? if (typeof childNode === 'string') {
??????????? createTextNode(node, childNode);
??????? } else if (childNode && childNode.nodeName) {
??????????? node.appendChild(childNode)
??????? } else if (childNode instanceof Array) {
??????????? for (var i = 0; childNode[i]; i++) {
??????????????? node.appendChild(childNode[i])
??????????? }
??????? }

??????? //處理文本節點
??????? if (textNode && typeof textNode === 'string') {
??????????? createTextNode(node, textNode);
??????? }
??????? return node;
??? }
??? var createAttributeNode = function(node, attrs) {
??????? for (var i in attrs) {貨運專家
??????????? //下面這種方式適用于原生的節點屬性
??????????? //node[i] = attrs[i];
??????????? //在IE下setAttribute設置某些原生屬性會有兼容性問題
??????????? //node.setAttribute(i, attrs[i]);
??????????? //document.createAttribute在IE下設置原生屬性會不帶引號
??????????? var a = doc.createAttribute(i);
??????????? a.value = attrs[i];
??????????? node.setAttributeNode(a);
??????? }
??? }
??? var createTextNode = function (node, text) {
??????? node.appendChild(doc.createTextNode(text))
??? }
} ();

轉載于:https://www.cnblogs.com/sky7034/archive/2011/07/19/2110344.html

總結

以上是生活随笔為你收集整理的Javascript元编程创建DOM节点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。