Recreate HTML elements from one Div to another Div by ClassName

Question

Recreate HTML elements from one Div to another Div by ClassName

Navigation

#1 by (1 votes)

1

Well, some will suggest me to use cloneNode(true) of Javascript to make a appendChild(var) in the DOM .

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

So I believe that retrieving your attributes with the for loop is ideal for replicating the elements again. Here's what I've 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><ahref="http://www.monkie.com.br" onclick="return false"><img src="https://lorempixel.com/100/100/people/d"></a></p><p><ahref="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 to replicate only the className whose value (photo) is defined in this input type='hidden' id='nome' put in the example.

The div id="A" is vertical, it symbolizes a playlist in the actual project, and already 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.

So the question. I can not reuse the CSS from div id="A" to div id="B" .

javascript css dom for

asked by anonymous 08.04.2017 / 16:57

1 answer

How to replace the * selector in production Return the shortest date within the Select

score 1 · Accepted Answer

___ erkimt ___ Recreate HTML elements from one Div to another Div by ClassName ______ qstntxt ___

Well, some will suggest me to use %code% of Javascript to make a %code% in the DOM .

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

So I believe that retrieving your attributes with the %code% loop is ideal for replicating the elements again. Here's what I've tried:

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><ahref="javascript:void(0)"><img src="https://lorempixel.com/100/100/people/d"></a></p><p><ahref="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"/>

The detail is to replicate only the %code% whose value (photo) is defined in this %code% put in the example.

The %code% is vertical, it symbolizes a playlist in the actual project, and already %code% , 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.

So the question. I can not reuse the CSS from %code% to %code% .

______ ___ azszpr196988

Here's how to answer the snippet the question now fixed and in working order. 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><ahref="javascript:void(0)"><img src="https://lorempixel.com/100/100/people/d"></a></p><p><ahref="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"/>

___