Question

I have a variable myvar = document.getElementById('myid').innerHTML that I would like to replace all of the images in with their corresponding src attribute using JavaScript.

EDIT: Sorry for the confusion! I was trying to be succinct, time being precious and all – apparently I failed.

To borrow from Jon’s interpretation:

I want to store all elements with the id of myid in myvar and then iterate through them to change all of them to plain text – the plain text being the value of their src attributes.

Here is an example of what I would like to achieve.

I start with something like this:

<img src="someimage.png"><br>
Lorem ipsum dolor sit amet<br>
<img src="anotherimage.jpg"><br>
Lorem ipsum dolor sit amet

And it would translate to:

someimage.png<br>
Lorem ipsum dolor sit amet<br>
anotherimage.jpg<br>
Lorem ipsum dolor sit amet

Answer 1

Seems everyone missed what you were asking, perhaps you’ve “clarified” the question. This should suit:

var image, images = document.images;
var i = images.length;

while (i--) {
  image = images[i];
  image.parentNode.replaceChild(document.createTextNode(image.src), image);
}

It will replace all the images in the document with a text node of their src property value. Note that as you replace each element, the images collection will get shorter, hence the backward loop. You could also do:

while (images.length) { 
  image = images[0];
  image.parentNode.replaceChild(document.createTextNode(image.src), image);
}

If you want to restrict it to just the images inside a paricular element, get a reference to the element and create images as a NodeList using element.getElementsByTagName('img');