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

zhou_web
  • 1.5k

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

var CreateDiv = function() {

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

回复
阅读 3k
7 个回答
✓ 已被采纳
  1. 使用惰性函数(这个方法很巧妙哦~)

    function createDiv(){
      var div = document.createElement("div");
      div.innerHTML = "测试";
      document.body.appendChild(div);
      createDiv = function(){
         return div;
      }
      return div
     }
  2. 使用单例模式(不赘述了,答案里有)

毫无疑问,使用单例模式啦!

var getSingle = function(fn){
    var result;
    return function(){
        return result || (result =fn.apply(this, arguments));
    };
}; 
var createDiv = function(){
    var Div = document.createElement("div");
    document.getElementById("onlyDiv");
    Div.id = 'onlyDiv';
    Div.innerHTML = "测试";
    document.body.appendChild(Div);
};   
var createSingleDiv=getSingle(createDiv);

单例模式

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

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

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

};
CreateDiv.prototype.create = function() {
    var Div = document.createElement("div");
    document.getElementById("onlyDiv") && document.body.removeChild(document.getElementById("onlyDiv"));
    Div.id = 'onlyDiv';
    Div.innerHTML = "测试";
    document.body.appendChild(Div);
};


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

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

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

你知道吗?

宣传栏