Replace the text inside with

Question

I have this :

<div class="blog-page-nav-previous">
    <a href="my-link" class="blog-link">&lt;&lt;Previous</a>
</div>

I'm trying to find all instances of the class blog-page-nav-previous and replace the text inside the <a> tag: <<Previous with an image of my own.

How do I do that?

are you trying to replace the element with an element or place an element inside of the element? — Potter Edgerton, Dec 24 '22 at 23:55
Does this answer your question? [How to replace entire HTML content with Javascript?](https://stackoverflow.com/questions/58335774/how-to-replace-entire-html-content-with-javascript) — Henry Woody, Dec 24 '22 at 23:58

Nathan Bayne · Answer 1 · 2022-12-25T13:07:32.697

0

This should work:

var myClasses = document.getElementsByClassName("blog-page-nav-previous");

for (var i = 0; i < myClasses.length; i++) {
  myClasses[i].innerHTML = "<img src='image.jpg'>";
  }

<div class="blog-page-nav-previous">
 <a href="my-link" class="blog-link">Previous</a>
</div>

If you want the image to have keep the same link as what "Previous" is set as, change the getElementByClassName to look for "my-link" instead of "blog-page-nav-previous"

edited Dec 25 '22 at 13:07

answered Dec 25 '22 at 00:00

Nathan Bayne

190
12

Thank you for your prompt response but it is not working. I'm not seeing any changes. – mhamdouchi Dec 25 '22 at 02:24

score 0 · Answer 2 · answered Dec 25 '22 at 00:06

You could try this

var a = document.getElementsByClassName("blog-page-nav-previous");

a.forEach(function(a){
  a.outerHTML = '<img src="images/image.jpg" alt="image">'
});

If you are trying to only replace the contents of the element you could replace a.outerHTML with a.innerHTML

score 0 · Accepted Answer · answered Dec 25 '22 at 03:45

Since you're asking for a jQuery solution:

// Select all the <a> tags inside .blog-page-nav-previous and change their innerHTML to an <img> tag:
$('.blog-page-nav-previous a').html('<img src="foo.jpg">');

<div class="blog-page-nav-previous">
    <a href="my-link" class="blog-link">&lt;&lt;Previous</a>
</div>

score 0 · Answer 4 · answered Dec 25 '22 at 06:01

I think you want the image to work as a link, if yes then I have a solution for you

<div class="blog-page-nav-previous">
    <a href="my-link" class="blog-link"><img src="example.png"></a>
</div>

This should work and sorry if this is not the answer you want

Replace the text inside with

4 Answers4