[英]Convert object to HTML element
在函數的輸入中是具有這種結構的對象:
{
tag: 'a', //type of html object
content: "blabal", //inner content
attr: {
href: "vk.com",
id: 'someId'
},
events: {
click: 'alert(this.href)',
focus: 'this.className="active"'
},
style: {
width:"100px"
}
}
它描述了一個HTML元素。 它必須返回具有指定屬性的HTML元素。 怎么解析呢? 我有這樣的事情:
elemen={
tag:'a',
content:"blabal",
attr:{
href:"vk.com",
id:'someId'
},
events:{
click:'alert(this.href)',
focus:'this.className="active"'
},
style:{
width:"100px"
}
};
console.log(elemen.tag);
var node = document.createElement(elemen.tag);
node.innerHTML= elemen.content;
for(var prop in elemen.events){
var fun =new Function(elemen.events[prop]);
console.log(fun);
node.bind(prop, fun);
// divv.bind(prop, fun);
}
使用addEventListener
在Element
和.bind(thisArg)
上注冊事件,將指定的參數作為this-context
var elemen = { tag: 'a', content: "blabal", attr: { href: "vk.com", id: 'someId' }, events: { click: 'alert(this.href)', focus: 'this.className="active"' } }; var node = document.createElement(elemen.tag); node.innerHTML = elemen.content; for (var attr in elemen.attr) { node.setAttribute(attr, elemen.attr[attr]); } for (var prop in elemen.events) { node.addEventListener(prop, new Function(elemen.events[prop]).bind(node)); } document.body.appendChild(node);
.active { color: red; }
僅使用javascript
var _createElem = document.createElement(""+_elem.tag+"");
_createElem.innerHTML = _elem.content;
//set attributes
for(var keys in _elem.attr){
_createElem.setAttribute(''+keys+'',_elem.attr[keys])
}
//set style
for(var keys in _elem.style){
_createElem.setAttribute(''+keys+'',_elem.style[keys])
}
//set events
for(var keys in _elem.events){
_createElem.setAttribute('on'+keys,_elem.events[keys])
}
document.getElementById("demoDiv").appendChild(_createElem)
注意:elem有onclick
和href
,你可能需要根據你的要求return true/false
使用以下功能:
const objectToHTML = function(obj) {
const element = document.createElement(obj.tag)
element.innerHTML = obj.content
for (const name in obj.attr) {
const value = obj.attr[name]
element.setAttribute(name, value)
}
for (const name in obj.events) {
const listener = new Function(obj.events[name]).bind(element)
element.addEventListener(name, listener)
}
for (const property in obj.style) {
const value = obj.style[property]
element.style[property] = value
}
return element
}
要從字符串創建事件偵聽器,您必須使用Function
構造函數將其轉換為函數,使用Function.prototype.bind()
將上下文綁定到它(否則函數將以window
作為上下文執行),最后,使用element.addEventListener()
。
其余的相當明顯。
您可以像這樣使用此功能:
const element = objectToHTML({
tag: 'a',
content: "blabal",
attr: {
href: "vk.com",
id: 'someId'
},
events: {
click: 'alert(this.href)',
focus: 'this.className="active"'
},
style: {
width: "100px"
}
})
document.body.appendChild(element)
看演示:
const objectToHTML = function(obj) { const element = document.createElement(obj.tag) element.innerHTML = obj.content for (const name in obj.attr) { const value = obj.attr[name] element.setAttribute(name, value) } for (const name in obj.events) { const listener = new Function(obj.events[name]).bind(element) element.addEventListener(name, listener) } for (const property in obj.style) { const value = obj.style[property] element.style[property] = value } return element } const element = objectToHTML({ tag: 'a', content: "blabal", attr: { href: "vk.com", id: 'someId' }, events: { click: 'alert(this.href)', focus: 'this.className="active"' }, style: { width: "100px" } }) document.body.appendChild(element)
我推薦這種形式,更具適應性。
window.onload = function() { function init_() { function action__(type, element, convert, a) { if (type == "function") { if (convert.create[a] != null) { try { var new_ = convert.create[a](element[a]); } catch (rrr) { rrr = (rrr.toString()); if (rrr.indexOf('2 arguments') != -1 && Object.keys(element[a]).length != 0) { for (v in element[a]) { convert.create[v] = element[a][v]; var new_ = convert.create; } }; } convert['create'] = new_; } }; if (type == "object") { for (f in element[a]) { convert.create[a][f] = element[a][f]; } } if (type == "string" && a != "events") { convert.create[a] = (element[a]); } else if (type == "string" && a == "events") { for (ev in element[a]) { var type = convert.detectType(convert.create, ev); if (type == "function") { convert.create.addEventListener(ev, new Function(element[a][ev])); } }; }; return convert.create; }; function createElement(elements) { var finished = []; if (typeof elements.tagName == "undefined" && !elements.length) { elements = [elements]; } for (r = 0; r < elements.length; r++) { var element = elements[r]; if (element) { var convert = { create: document, detectType: function(element, attribute) { var type = "string"; if (typeof element[attribute] != "undefined") { type = typeof element[attribute]; }; return type; }, add: function(new_) { if (new_ && new_ != "undefined") { this.create = new_; } } }; for (a in element) { var type = convert.detectType(convert.create, a); var returner = action__(type, element, convert, a); convert.add(returner); } finished.push(convert.create); }; } return (finished); }; var minifi_function = init_.toString(); var elements = [{ createElement: 'a', innerHTML: "blabal", setAttribute: { href: "vk.com", id: 'someId', style: "height:200px;" }, events: { click: 'alert(this.href)', focus: 'this.className="active"' }, style: { width: "100px" } }, { createElement: 'div', innerHTML: "see my content", setAttribute: { ['data-link']: "vk.com", id: 'someId2', style: "height:200px;background:red;" }, events: { click: 'prompt("Copy",' + minifi_function + ')', focus: 'this.className="activediv"' }, style: { width: "100px" } }]; var elementos = createElement(elements); console.log(elementos); for (p = 0; p < elementos.length; p++) { document.body.appendChild(elementos[p]); } } init_(); }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.