web-dev-qa-db-ja.com

オブジェクトをHTML要素に変換する

関数の入力には、次の構造を持つオブジェクトがあります。

{
  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);
}
javascriptjqueryhtmlobjectjavascript-objects
7
Vladimir Lebedev

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が必要になる場合があります。

4
brk

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;
}
6
Rayon

次の関数を使用します。

_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)_
0
Michał Perłakowski