Я бы предложил:
// retrieve all <img> elements in the document,
// using document.querySelector(); then iterate
// over that NodeList using
// NodeList.prototype.forEach():
document.querySelectorAll('img').forEach(
// 'el' is a reference to the current element of
// of the NodeList of elements; and here we use
// Node.replaceWith() to replace the current ('el')
// Node with a textNode, with the node-value set to
// the src of the element:
(el) => el.replaceWith(document.createTextNode(el.src))
);
// retrieve all <img> elements in the document,
// using document.querySelector(); then iterate
// over that NodeList using
// NodeList.prototype.forEach():
document.querySelectorAll('img').forEach(
// 'el' is a reference to the current element of
// of the NodeList of elements; and here we use
// Node.replaceWith() to replace the current ('el')
// Node with a textNode, with the node-value set to
// the src of the element:
(el) => el.replaceWith(document.createTextNode(el.src))
);
<ul>
<li><img src="https://i.stack.imgur.com/wa24z.jpg"></li>
<li><img src="https://i.stack.imgur.com/jS9JB.jpg"></li>
<li><img src="https://i.stack.imgur.com/ifMfn.jpg"></li>
<li><img src="https://i.stack.imgur.com/rlEus.jpg"></li>
<li><img src="https://i.stack.imgur.com/sRoGY.jpg"></li>
<li><img src="https://i.stack.imgur.com/0dsoZ.jpg"></li>
<li><img src="https://i.stack.imgur.com/GO9Tx.jpg"></li>
</ul>
Демонстрация JS Fiddle .
Выше, с использованием функций ES6 (let, childNode.replaceWith() и функции со стрелками) не будут работать в браузерах, которые не поддерживают ES6;Ниже приведен альтернативный вариант использования ES5, который может быть более надежным:
function naiveReplaceWith(originalNode, replacementNode) {
// here we navigate from the originalNode (the node to be replaced)
originalNode
// to its parentNode:
.parentNode
// and call parentNode.replaceChild:
.replaceChild(
// supplying the replacement-node as the first argument:
replacementNode,
// and the original node as the second:
originalNode);
}
// here we use Array.prototype.slice(), along with Function.prototype.call,
// to allow us to apply the Array.prototype.forEach() to the Array-like
// NodeList returned by document.querySelectorAll():
Array.prototype.slice.call(document.querySelectorAll('img')).forEach(function(el) {
// using the anonoymous function on each of the elements in the Array of elements:
naiveReplaceWith(el, document.createTextNode(el.src));
});
<ul>
<li><img src="https://i.stack.imgur.com/wa24z.jpg"></li>
<li><img src="https://i.stack.imgur.com/jS9JB.jpg"></li>
<li><img src="https://i.stack.imgur.com/ifMfn.jpg"></li>
<li><img src="https://i.stack.imgur.com/rlEus.jpg"></li>
<li><img src="https://i.stack.imgur.com/sRoGY.jpg"></li>
<li><img src="https://i.stack.imgur.com/0dsoZ.jpg"></li>
<li><img src="https://i.stack.imgur.com/GO9Tx.jpg"></li>
</ul>
Демонстрация JS Fiddle .
Если вы хотите, чтобы текст src был активной ссылкой,чтобы пользователь мог перейти по ссылке на исходное изображение:
// a named function that takes a couple of arguments,
// the URL to be the href of the created element, and
// the String which will be the text-content of the
// created elemeent:
let anchorCreate = (href, text) => {
// creating an <a> element:
let a = document.createElement('a');
// setting the href property:
a.href = href;
// setting the textContent property; if there is
// no supplied text then the textContent will be
// set to the href:
a.textContent = text || href;
return a;
}
// retrieve all <img> elements in the document,
// using document.querySelector(); then iterate
// over that NodeList using
// NodeList.prototype.forEach():
document.querySelectorAll('img').forEach(
// here we replace the current element ('el') with
// the content returned from the function:
(el) => el.replaceWith(anchorCreate(el.src))
);
<ul>
<li><img src="https://i.stack.imgur.com/wa24z.jpg"></li>
<li><img src="https://i.stack.imgur.com/jS9JB.jpg"></li>
<li><img src="https://i.stack.imgur.com/ifMfn.jpg"></li>
<li><img src="https://i.stack.imgur.com/rlEus.jpg"></li>
<li><img src="https://i.stack.imgur.com/sRoGY.jpg"></li>
<li><img src="https://i.stack.imgur.com/0dsoZ.jpg"></li>
<li><img src="https://i.stack.imgur.com/GO9Tx.jpg"></li>
</ul>
JS Fiddle demo .
Ссылки: