javascript - 将两种不同类型的 div 附加到单个容器

Question

我有两个不同的 div，它们的类分别称为“红色”和“蓝色”。默认情况下，这些是隐藏的。我想将它们克隆并显示到一个名为“cont”的容器中。红色按钮附加红色 div 的蓝色按钮附加蓝色 div。

function redCreator(word){
  var red =document.getElementsByClassName('red')[redPos];
  redPos++;
  var redClone = red.cloneNode(true);
  document.getElementById('cont').appendChild(redClone);
  item.style.display = 'inline';
  item.innerHTML=word;
}

function blueCreator(word){
 //same as red
}

现在红色 div 与蓝色 div 分开显示。 忽略时间和顺序我点击了它们

red1|red2|red3|blue1|blue2

如何让 div 按我单击它们的顺序显示？不分类(Class)。

red1|blue1|red2|blue2|blue3

我想出的一个解决方案是使用通用类名，然后再添加红色/蓝色类。

function redCreator(word){
  var item =document.getElementsByClassName('input-item')[itemPos];
  itemPos++;
  var itemClone = item.cloneNode(true);
  itemClone.className += " red";
  document.getElementById('cont').appendChild(itemClone);
  item.style.display = 'inline';
  item.innerHTML=word;

}

然而，这并没有像预期的那样工作。 CSS 乱七八糟

Answer 1

如果您正在寻找纯 JS 解决方案:

HTML:

<div class="red input">red</div>
  <div class="blue input">blue</div>
<div id="cont">
</div>

<button onclick="redCreator('red');">RED</button>

<button onclick="blueCreator('blue');">blue</button>

CSS

.input {
  display: none;
  padding:10px;
 }
.red {
  background:red;
}
.blue {
  background:blue;
}

JS:

function redCreator(word){
  var red =document.getElementsByClassName('red')[0];
  console.log(red);
  var redClone = red.cloneNode(true);
  document.getElementById('cont').appendChild(redClone);
  redClone.style.display = 'inline-block';
  redClone.innerHTML=word;
}

function blueCreator(word){
 var blue =document.getElementsByClassName('blue')[0];
  var blueClone = blue.cloneNode(true);
  document.getElementById('cont').appendChild(blueClone);
  blueClone.style.display = 'inline-block';
  blueClone.innerHTML=word;
}

只需添加一些行来获取编号就可以了。快乐编码。