JavaScript动态创建div问题怎么保证它的唯一

Question

以下是代码 ，我点击按钮时能创建多个p，现在我要的是只创建一次，第一次创建成功后以后就不创建，或者每次都创建然后把上一次创建的删除，有没有什么方法能做到啊？ 或者有没有什么设计模式可以用在这里的？想了很久都没有思路。

var Createp = function() {

};
Createp.prototype.create = function() {
    var p = document.createElement("p");
    p.innerHTML="测试";
    document.body.appendChild(p);
};
document.getElementById('btn').onclick = function() {
    (new Createp()).create();
};

Answer 1

1. 使用惰性函数（这个方法很巧妙哦~）

   function createp(){
     var p = document.createElement("p");
     p.innerHTML = "测试";
     document.body.appendChild(p);
     createp = function(){
        return p;
     }
     return p
    }

2. 使用单例模式（不赘述了，答案里有）

Answer 2

毫无疑问，使用单例模式啦！

var getSingle = function(fn){
    var result;
    return function(){
        return result || (result =fn.apply(this, arguments));
    };
}; 
var createp = function(){
    var p = document.createElement("p");
    document.getElementById("onlyp");
    p.id = 'onlyp';
    p.innerHTML = "测试";
    document.body.appendChild(p);
};   
var createSinglep=getSingle(createp);

Answer 3

单例模式

var btn = document.getElementById('btn1');
btn.onclick = function(){
  singleton(createp);
};

//创建p
function createp(){
  var p = document.createElement('p');
  p.style.cssText = "width:100px;height:100px;background:#f00;";
  document.body.appendChild(p);
  return true;
}

//单例方法
function singleton(fn){
  var instance = null;
  return function(){
    if(!instance){
      instance = fn.apply(this,arguments);
    }
    return instance;
  }
}

Answer 4

var Createp = function() {

};
Createp.prototype.create = function() {
    var p = document.createElement("p");
    document.getElementById("onlyp") && document.body.removeChild(document.getElementById("onlyp"));
    p.id = 'onlyp';
    p.innerHTML = "测试";
    document.body.appendChild(p);
};


document.getElementById('btn').onclick = function() {
    (new Createp()).create();
};

Answer 5

哇，这个问题提得好，学习了

Answer 6

毫无疑问啦，使用单例模式，如果对象存在直接返回。

Answer 7

看了问题答案之后去查了单例模式，找到了AlloyTeam的这篇介绍单例模式的文章http://www.alloyteam.com/2012/10/common-javascript-design-patterns/
然后发现单例模式就是解决楼主提出的那类型问题的