javascript - 创建附加到 div 的内部 HTML

Question

我正在创建一个 Javascript 类

类(class)是这样的

(function(window){

    function Person(id,name,position,imageUrl){

    this.id = id;
    this.name = name;
    this.position = position;
    this.imageUrl = imageUrl;

    }

    Person.prototype.getPersonDiv = function(){

      var persondiv; 

    }

}(window));

我正在使用此类来动态创建 div。 div的基本结构是这样的

<div id = "employee1" class = 'person-profile'>

 <div class = 'avatar'>
   <img src = ""/>
 </div>

 <div class = 'employee-details'>
   <p>this.id <br/> this.name <br/> this.position<p>   
 </div>

</div>

div id employee1 将通过连接字符串“employee”和 id(类的属性)来创建。同样，img url 应来自 imageUrl(类的属性)。类似地，所有员工详细信息。

我计划将其编写为内部 HTML 或附加。我似乎无法让字符串正确。

该字符串将被写入 getPersonDiv 函数中的 persondiv 变量，并在我调用该函数时返回。

Answer 1

你可以尝试这样的事情，使用某种 javascript 微模板:

(function(window){

    function Person(id,name,position,imageUrl){

    this.id = id;
    this.name = name;
    this.position = position;
    this.imageUrl = imageUrl;

    }

    Person.prototype.getPersonDiv = function(){
      var _this = this;

      /* create basic person template */
      var personTPL = "<div class = 'employee-details'>"
          + "<p>{id}<br/>{name}<br/>{position}<p></div>";

      /* change any placeholder with instance properties */
      return personTPL.replace(/\{([^}]+)\}/g, function(tpl, key) {
             return  _this[key] || "undefined"
          });  
    };


     var me = new Person("10", "Fabrizio", "javascriptmonkey", "http://...");

     /* return HTML */
     console.log(me.getPersonDiv());

     /** e.g.
      *
      * <div class = 'employee-details'><p>10<br/>
      * Fabrizio<br/>javascriptmonkey<p></div>  
      */
}(window));

fiddle 示例:http://jsfiddle.net/6qZg5/