OOP JavaScript – Créez un objet Div personnalisé

Je commence avec OOP en JavaScript. Je veux créer un "panneau" personnalisé. Voici ce que j'ai jusqu'ici:

function ShinyPanel(css, attributes) { this.container = $(document.createElement("div")).addClass("shinyPanel"); this.titleBar = $(document.createElement("div")).addClass("shinyPanelTitleBar").appendTo(this.container); this.topShine = $(document.createElement("div")).addClass("shinyPanelTopShine").appendTo(this.container); this.leftShine = $(document.createElement("div")).addClass("shinyPanelLeftShine").appendTo(this.container); this.content = $(document.createElement("div")).addClass("shinyPanelContent").appendTo(this.container); if (!css) css = {}; if (!attributes) attributes = {}; this.css = css; $(this.container).css(this.css); this.title = attributes["title"]; $(this.titleBar).html(this.title); } 

Maintenant, je peux instancier cet objet et l'ajouter au corps via quelque chose comme ceci:

 var panel = new ShinyPanel({position:"absolute", top:"25%", width:"300px", height:"200px"}, {title:"Test"}); $("body").append(panel.container); 

Ma question est, est-ce qu'il y a un moyen pour moi de faire de l'objet lui-même un div, éliminant ainsi la nécessité d'un «conteneur» div? Ensuite, je pourrais simplement appeler $("body").append(panel); .

Ce n'est pas trop grave pour moi d'avoir le conteneur div là, c'est plus juste pour moi … voulant apprendre la bonne façon de faire les choses.

• Les mathématiques pour dessiner de petites lignes autour du cercle
• Pourquoi document.getElementById a considéré un objet dans IE8
• Qu'est-ce que ce point d'exclamation signifie en Javascript?
• Nouvelle FormData () "application / x-www-form-urlencoded"
• Mesurer la performance de Javascript

J'ai essayé this = document.createElement("div"); , Mais j'ai eu une erreur: invalid assignment left-hand side .

• L'affectation de déstructuration peut-elle être utilisée pour effectuer une projection dans CoffeeScript?
• Window.open () est bloqué par le navigateur lorsqu'il est appelé de la promesse
• Comment accéder aux constantes de type de nœud dans IE
• Changez l'épaisseur du corps en utilisant javascript
• Placer un tableau multidimensionnel dans Javascript à partir de PHP en utilisant JSON

 function ShinyPanel(css, attributes) { ... this.appendTo = function (to) { $(to).append(this.container); } 

 function shinyPanel(css, attributes) { ... all the stuff you did before return this.container }