Change text without removing the image?

Question

I currently have a problem with JavaScript and HTML. I want to edit the text of the button without removing the image which is in the same element. The line I want to edit:

<a href="warenkorb.html" class="artikel"><img src="warenkorb.png" height="25vh" id="warenkorb">Warenkorb</a>

What I have tried so far:

function warenAnzahl() {
    var artikel = localStorage.getItem("artikel")
    var x = document.getElementsByClassName("artikel")
    var i;
    if (artikel > 0) {
        for (i = 0; i < x.length; i++) {
            x[i].textContent = "Warenkorb (" + artikel + ")";
        }
    }
}

setInterval(warenAnzahl, 100)

The text gets changed how it should, but the image gets removed too with that method. Neither the text, nor the image, should move because it's already in my navbar.

Can you wrap the text in a `` tag? – XCS Sep 28 '18 at 19:07 — XCS, Sep 28 '18 at 19:07
No, sadly it removes the image too.. – Tiiill Sep 28 '18 at 19:12 — Tiiill, Sep 28 '18 at 19:12
Yes @chazsolo, thank you very much guys :) – Tiiill Sep 28 '18 at 19:15 — Tiiill, Sep 28 '18 at 19:15

score 2 · Answer 1 · edited Sep 28 '18 at 19:49

2

You can wrap the text inside a <span> and add a class to this span, then select this class instead of "artikel" class.

edited Sep 28 '18 at 19:49

Vega

27,856
27
95
103

answered Sep 28 '18 at 19:37

Carolina Sanchez Costa

21
4

This seems to be the most widely implemented solution – rc_dz Sep 28 '18 at 20:14

score 0 · Answer 2 · answered Sep 28 '18 at 19:31

0

instead of

x[i].textContent = "Warenkorb (" + artikel + ")";

try

x[i].innerHTML += " (" + artikel + ")";

this will add in the (artikel) to the end of the link, which looks like what you're trying to do.

answered Sep 28 '18 at 19:31

XTOTHEL

5,098
1
9
17

Daniel Lavi · Answer 3 · 2021-04-21T08:10:59.540

0

var appendImg = $('.artikel').children();
$('.artikel').text('Altered Text').append(appendImg);very simple ,

very simple, As soon as the text is changed it deletes all the children as we allready know ,

So save the children and then append them at the end (after renaming)

edited Apr 21 '21 at 08:10

answered Apr 20 '21 at 14:14

Daniel Lavi

1
2

please add some description of your answer – Joseph Apr 21 '21 at 06:37

Change text without removing the image?

3 Answers3