Question

我有两个不同的div，名为＆＃34; red＆＃34;和＆＃34;蓝＆＃34;。默认情况下这些是隐藏的。我想克隆并将它们显示在一个名为＆＃34; cont＆＃34;的单个容器中。红色按钮附加红色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 |蓝天|蓝色2

如何让div按照我点击的顺序显示？无论班级如何。

RED1 |蓝天| RED2 |蓝色2 | 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

所以使用jQuery（小提琴使用1.9.1 - 但它应该是向前兼容的）我把小提琴放在一起：

https://jsfiddle.net/27oa1pb7/

在这里 - 它接受隐藏div的内容并按照你点击它们到“cont”容器的顺序附加它们...使用CSS，你可以改变div的显示等等。它使用一个非常基本的链jQuery命令：

...
$("#reddiv").clone().show().appendTo( "#cont" )
...

此代码是我使用您的描述提出的，因为没有HTML或CSS示例说明您可能需要的内容。

希望这有帮助！快乐的编码！

Answer 2

如果您正在寻找纯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;
}

只需添加一些行即可获得编号，你会没事的。快乐的编码。

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

2 个答案: