Recreate HTML elements from one Div to another Div by Classname

Question

Well, some will suggest me using the cloneNode(true) Javascript to make a appendChild(var) in the GIFT.

But for this case, I have used this native resource, but it did not meet my need. Why, when I make a faithful clone of your child in DOM, the CSS that should style all its elements gets lost, does not define anything.

So I believe, recovering your attributes with the loop for is ideal to replicate the elements again. See what I have tried:

var str = document.getElementById('nome').value;

if (document.getElementsByClassName(str)) {

        document.getElementById('B').innerHTML = '';
        
var figura = document.body.getElementsByTagName('img');

var evento = document.body.getElementsByTagName('a');

        for (var i in figura, evento) {

            var image = figura[i];
            var titulo = image.className;
            var endereco =  image.src;

            var clic = evento[i];
            var link = clic.href;

            if ((titulo == str) || (clic == this.link)) {
                var xerox = image.innerHTML;
                 var copia = endereco.innerHTML;

                 var clique = link.innerHTML;
             document.getElementById('B').innerHTML = '<p><a href="'+ clique +'"><img src="'+ copia +'" class="'+ xerox +'"></a></p>';
             }   
         }
}

#A {
   	float : right;
   	width : 115px;
   	height : 400px;
   	overflow: auto;
   	padding  : 10px;
   	border : thin solid silver;
}

#B { 
   	overflow-x: auto;
   	overflow-y: hidden;
   	width : 400px;
   	height : 100px;
   	padding  : 10px;
   	border : thin solid silver;
} 

#B p {
   	padding : 10px;
   	margin : 0 auto;
   	cursor : pointer;
   	display : inline-blinkk;
   	display : inline;
   	vertical-align : top;
}

<div id="A">
  <p><a href="http://www.monkie.com.br" onclick="return false"><img src="https://lorempixel.com/100/100/people/a/" class="foto"></a></p>
  <p><a href="http://www.monkie.com.br" onclick="return false"><img src="https://lorempixel.com/100/100/people/b" class="foto"></a></p>
  <p><a href="http://www.monkie.com.br" onclick="return false"><img src="https://lorempixel.com/100/100/people/c"></a></p>
  <p><a href="http://www.monkie.com.br" onclick="return false"><img src="https://lorempixel.com/100/100/people/d"></a></p>
  <p><a href="http://www.monkie.com.br" onclick="return false"><img src="https://lorempixel.com/100/100/people/e" class="foto"></a></p>
</div>

<div id="B" nowrap></div>

<input type="hidden" id="nome" value="foto"/>

The detail is on account of replicating only className whose value(photo) is defined in this input type='hidden' id='nome' set in the example.

To div id="A" this vertical, symbolizes a playlist in the actual project, and div id="B", is horizontally aligned to the left where it symbolizes related elements when chosen by clicking on the playlist. Both have different roles, different CSS rules.

That’s why. I can’t reuse the CSS from div id="A" for div id="B".

Answer 1

Follows as response the snippet of the question now corrected and in perfect operation. See:

var resultado = document.getElementById('B');

var str = document.getElementById('nome').value;

if (document.getElementsByClassName(str)) {
    
var figura = document.getElementsByTagName('img');

var evento = document.body.getElementsByTagName('a');

    for (var i in figura, evento) {

        var image = figura[i];
        var titulo = image.className;
        var endereco =  image.src;

        var clic = evento[i];
        var link = clic.href;

        if (titulo == str) {
         var xerox = image;
         var copia = endereco;

         var clique = link;
         resultado.innerHTML += '<p><a href="'+ clique +'"><img src="' + copia + '" class="' + xerox + '"></a></p>'
            }   
        }
}

#A {
   	    float : right;
   	    width : 115px;
   	    height : 400px;
   	    overflow: auto;
   	    padding  : 10px;
   	    border : thin solid silver;
}

#B { 
   	    overflow-x: auto;
   	    overflow-y: hidden;
   	    width : 400px;
   	    height : 100px;
   	    padding  : 10px;
   	    border : thin solid silver;
} 

#B p {
   	   padding : 10px;
   	   margin : 0 auto;
   	   cursor : pointer;
   	   display : inline-blinkk;
   	   display : inline;
   	   vertical-align : top;
}

<div id="A">
  	    <p><a href="javascript:void(0)"><img src="https://lorempixel.com/100/100/people/a/" class="foto"></a></p>
  	    <p><a href="javascript:void(0)"><img src="https://lorempixel.com/100/100/people/b" class="foto"></a></p>
  	    <p><a href="javascript:void(0)"><img src="https://lorempixel.com/100/100/people/c"></a></p>
  	    <p><a href="javascript:void(0)"><img src="https://lorempixel.com/100/100/people/d"></a></p>
  	    <p><a href="javascript:void(0)"><img src="https://lorempixel.com/100/100/people/e" class="foto"></a></p>
</div>

<div id="B" nowrap></div>

<input type="hidden" id="nome" value="foto"/>