Question

我试图创建一个基于按钮单击的动态div，只有在之前没有创建过div时。例如，如果div 1不存在，则创建div 1。如果只存在div而不存在div 2，则创建div 2，等等。程序一次添加多个div的问题

＆＃13;

function createDivs() {
    if (document.getElementById('div0') === null) {
      divGenerator(1, 'div0', 'class1');
    }
    // Create Div 2
    if (document.getElementById('div0') !== null && document.getElementById(
      'div1') === null) {
      divGenerator(1, 'Div1', 'class2');
      
    } //create div 3
    if (document.getElementById('div0') !== null && document.getElementById(
      'div1') !== null && document.getElementById('div2') === null) {
      divGenerator(2, 'div2', 'class3');
    }
  }
  // dynamic div creator

function divGenerator(number_of_divs, divId, className) {
  var div, container, counter;
  container = document.getElementById('container');
  for (counter = 0; counter < number_of_divs; counter++) {
    div = document.createElement('div');
    //div.id = "div" + counter;
    div.id = divId;
    div.className = className;
    div.innerHTML = divId;
    container.appendChild(div);
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="js/createDivs.js"></script>

  <title>Create Divs</title>
</head>

<body>
  <button onclick="createDivs();">Add Div</button>

  <div id="container"></div>
</body>

</html>

＆＃13;

Answer 1

调用按顺序执行，因此它检查刚刚完成创建的div的存在。扭转它们，以便最后一次出现。

Answer 2

您的代码对我有用，我做了一些不同的事情，例如为您的按钮使用事件监听器。在你的第二个div ...你有（Div1）而不是（div1）所以getElementById不起作用。我已经尝试过生成乘法div并且有效。顺便说一句很棒的想法。

document.getElementById("btn").addEventListener("click",function() {
    if (document.getElementById('div0') === null) {
      divGenerator(3, 'div0', 'class1');
    }

    else if (document.getElementById('div0') !== null && document.getElementById(
      'div1') === null) {
      divGenerator(3, 'div1', 'class2');
    }
    else if (document.getElementById('div0') !== null && document.getElementById(
      'div1') !== null && document.getElementById('div2') === null) {
      divGenerator(2, 'div2', 'class3');
    }
});


function divGenerator(number_of_divs, divId, className) {
  var div, container, counter;
  container = document.getElementById('container');
  for (counter = 0; counter < number_of_divs; counter++) {
    div = document.createElement('div');
    //div.id = "div" + counter;
    div.id = divId;
    div.className = className;
    div.innerHTML = divId;
    container.appendChild(div);
  }
}

基于条件语句创建动态div

2 个答案: