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

Question

I want clone only images whose the attribute alt be "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 must check if it matches the condition if. But it’s not working yet as it should and the console shows no syntax errors.

Answer 1

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

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

The whole code could be 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, that would be:

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 making .cloneNode of the string, not the element
• you had the if out of the loop for, and it has to be inside