Question

目前我这样做：

function createPlayer(id) {
  var playerWrapper = document.createElement("div");
  document.body.appendChild(playerWrapper);

  var player = document.createElement("div");
  playerWrapper.appendChild(player);

  var Player = {
    wrapper: playerWrapper,
    player: player
  }

}

只是想知道这是否是最好的方式，或者是否有某种方法我可以同时创建dom元素和对象？该对象还将附加方法。对象和相关元素也会有多个实例。

Answer 1

appendChild函数返回附加节点，因此您可以创建一个空对象并将返回的节点直接分配给对象，如下所示： http://jsfiddle.net/v7xeLnot/1/

function createPlayer(id) {
    var Player = {}
    var playerWrapper = document.createElement('div');
    Player.wrapper = document.body.appendChild(playerWrapper);

    var player = document.createElement('div');
    Player.player = playerWrapper.appendChild(player);   

    return Player;

}
var myPlayer = createPlayer("someId");

Answer 2

代码本身应该以面向对象的方式编写，如here

此外，您应该使用jQuery和append()方法，而不是普通document.createElement和appendChild。这将确保跨浏览器兼容性，并使您更容易编写其他功能。

如果您需要创建大量html，可以考虑一些templateing engine

创建具有关联dom元素的javascript对象的首选方法是什么？

2 个答案: