如何将对象附加到 DOM？

Question

我喜欢像这样自己创建一个对象：

function Table()
{

};
Table.prototype.toString = function ( ) 
{
    return '<table><tr><td></td></tr></table>';
};
var table = new Table();

$('body').append(table);

但是确实失败了。那么为您自己的对象实现这一点的诀窍是什么？可以通过图像看到类似的东西。

var image = new Image();
image.src = '//some_image.jpg';
$('body').append(image);

现在我对 table 的等价物不感兴趣。表只是我自己的对象的一个​​例子。

Answer 1

<script>
  var htmlCon = "<div id='iconDiv'><table style='align:center;color:#fff;'></table></div>";
  $('body').append(htmlCon);
  $('#iconDiv').addClass("iconDiv").css({"left":xPos+20, "top":yPos-80});
  $('#iconDiv table').append('<tr><td colspan="4" style="color:#000"><b>Event</b></td><td align="right" valign=""><ahref="javascript:close()">X</a></td></tr>');
  $('#iconDiv table').append('<tr><td>When</td><td>:</td><td>'+""+day+""+'-'+""+monthName+""+' - '+""+year+""+'</td></tr>');
  $('#iconDiv table').append('<tr><td>What</td><td>:</td><td><input type="text" name="wht" id="wht"><input type="hidden" name="start" id="start" value='+"'"+year+""+'-'+""+month+""+'-'+""+day+"'"+'><input type="hidden" name="end" id="end" value='+"'"+year+""+'-'+""+month+""+'-'+""+day+"'"+'></td></tr>');
  $('#iconDiv table').append('<tr><td colspan="5">e.g. Tea at the Ritz</td></tr>');
  $('#iconDiv table').append('<tr><td colspan="5"><input type="button" value="createEvent" class="button" onclick="CreateEvent()">&nbsp;<input class="button" type="button" value="editEvent" onclick="editEvent('+"'"+year+"'"+','+"'"+month+"'"+','+"'"+day+"'"+')"></td></tr>');</script>

Answer 2

试试这个

function Table()
{
    return document.createTextNode("That´s a table");
};

确实有效的东西：

Table.prototyp.toDOM = function()
{
    return document.createTextNode("That´s a table");
};

$("body").append(table.toDOM());