How to create a copy of an element, through its property

Question

How to create a copy of an element, through its property

Navigation

#1 by (3 votes)

2

I want to clone only the images whose attribute alt is "photo".

Code

var str = document.getElementById('A');

var clone = str.cloneNode(true); 
document.getElementById('B').appendChild(clone);

<span id='A'>

<p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/1.jpg"alt="foto" /></p>

<p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/2.jpg"alt="foto" /></p>

<p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/3.jpg"alt="foto" /></p>

<p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/4.jpg"alt="poster"/></p>

<p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/5.jpg"alt="figura"/></p>

</span>

<hr>

<span id='B'> &nbsp; </span>

What I did, was:

var item = document.getElementById('A').getElementsByTagName('p');

    for (var i = 0; i < item.length; i++) {

    var str = item[i].getElementsByTagName('img')[0].alt;

    }

if(str == "foto") {
    var clone = str.cloneNode(true); 
    document.getElementById('B').appendChild(clone);
}

For this to happen, I should check if it matches the condition if . But it is not working yet as it should and in the console it does not show any syntax errors.

javascript loop clone

asked by anonymous 25.03.2017 / 17:50

1 answer

Get content through class with php How to get the pixel color touched on the screen on Android? (Without using images)

score 3 · Accepted Answer

If you know exactly what alt you want, you can use that in a CSS selector like this:

document.querySelectorAll('[alt="foto"]');

The whole code could look like this:

var fotos = document.querySelectorAll('[alt="foto"]');
var destino = document.getElementById('B');
for (var i = 0, l = fotos.length; i < l; i++) {
  var clone = fotos[i].parentElement.cloneNode(true);
  destino.appendChild(clone);
}

#A {
  display: none; /* só para o exemplo */
}

<span id='A'>
  <p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/1.jpg"alt="foto" /></p>
  <p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/2.jpg"alt="foto" /></p>
  <p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/3.jpg"alt="foto" /></p>
  <p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/4.jpg"alt="poster"/></p>
  <p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/5.jpg"alt="figura"/></p>
</span>
<hr>
<span id='B'></span>

Using your code, corrected, it would look like this:

var item = document.getElementById('A').getElementsByTagName('p');
var destino = document.getElementById('B');
for (var i = 0; i < item.length; i++) {
var img = item[i].querySelector('img');
  var str = img.alt;
  if (str == "foto") {
    var clone = img.cloneNode(true);
    destino.appendChild(clone);
  }
}

#A {
  display: none;
  /* só para o exemplo */
}

<span id='A'>
  <p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/1.jpg"alt="foto" /></p>
  <p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/2.jpg"alt="foto" /></p>
  <p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/3.jpg"alt="foto" /></p>
  <p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/4.jpg"alt="poster"/></p>
  <p><img src="https://sites.google.com/site/mplayerplugin/thumbnails/5.jpg"alt="figura"/></p>
</span>
<hr>
<span id='B'></span>

You had some errors in your code, namely:

You were doing .cloneNode of the string, not the element
you have if out of the for loop, and must be in