Question

我希望能够采用HTML元素的所有属性并将它们附加到对象上，以便该对象将像HTML元素一样工作。

var clone = {};

function maker(obj){
  var e = document.createElement("div");
  e.innerHTML = "hello world";

  for(var key in e){
    obj[key] = e[key];
  }
}

maker(clone);
clone = <div>hello world</div>

这在某种程度上起作用。 clone将获得元素的某些属性，但我需要能够进行深层迭代，并且需要处理循环引用才能获得所有内容。我还想知道我尝试做的事情是否还有其他问题？

此外，是的，我知道我可以轻松做到：

function maker(){
  var e = document.createElement("div");
  e.innerHTML = "hello world";
  return e;
}

var clone = maker();
clone = <div>hello world</div

另一个可以按我希望的方式工作的选项：

var clone = {};

function maker(obj){
  var e = document.createElement("div");
  e.innerHTML = "hello world";
  obj.e = e.cloneNode(true);
}

maker(clone);
clone.e = <div>hello world</div>

但是最佳的解决方案是能够写maker(clone)并拥有clone = <div>hello world</div>

Answer 1

使用element.cloneNode(true)来深克隆HTML元素。

function maker(){
  var e = document.createElement("div");
  e.innerHTML = "hello world";
  return e.cloneNode(true);
}

Answer 2

那是我所能得到的。

function maker(target, context) {
  context = context || this;

  var source = document.createElement("p");
  source.innerHTML = "hello world";
  context[target] = source.cloneNode(true);
}

// Global Scope
var clone = {};
maker('clone');
console.log(clone);

// Object scope - maker in obj
var obj = {
  'objClone': {},
  'method': function() {
    maker('objClone', this);
  }
}
obj.method();
console.log(obj.objClone);

// Object Scope - maker outside obj2
var obj2 = {
  'objClone': {}
}
maker('objClone', obj2); // you will need context here
console.log(obj2.objClone);

我可以将HTML元素合并到对象吗？

2 个答案: