Why does my innerHTML disappear when replacing it?

Question

I'm trying to replace some HTML using .innerHTML and .replace.

From:

aaaaaa/cat/bbbbbb

To:

<a href="http://www.google.com/cat/world">Helloworld</a>

This is my code:

<body>
    <p id="element1">aaaaaa/cat/bbbbbb</p>

    <script language="javascript">
        var strMessage1 = document.getElementById("element1") ;
        strMessage1.innerHTML = strMessage1.innerHTML.replace( /aaaaaa./g,'<a href=\"http://www.google.com/') ;
        strMessage1.innerHTML = strMessage1.innerHTML.replace( /.bbbbbb/g,'/world\">Helloworld</a>') ;
    </script>
</body>

When I run this code it makes the Helloworld hyperlink disappear. What am I doing wrong?

Antony · Accepted Answer · 2013-03-25 15:31:30Z

32

You should chain the replace() together instead of assigning the result and replacing again.

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

See DEMO.

edited Mar 25, 2013 at 15:31

answered Mar 25, 2013 at 15:24

Antony

15.2k10 gold badges48 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

M21 Over a year ago

I did this, but it breaks the rest of the page from wherever it's inserted.

Antony Over a year ago

@M21 HTML string replace is more like a fun exercise than a reliable solution. If you have a slightly different problem, please ask your own question. Illustrate with an example of why it doesn't work in your question, show us what you have tried, and you can also link to this question if you want.

TylerH Jan 7 at 16:58

This was useful for me to observe the format that appears to be required of elem.innerHTML = elem.innerHTML.replace(); I was trying to directly replace the value with elem.innerHTML.replace without assignment and it was not working.

Guffa · Accepted Answer · 2013-03-25 15:22:58Z

5

You are replacing the starting tag and then putting that back in innerHTML, so the code will be invalid. Make all the replacements before you put the code back in the element:

var html = strMessage1.innerHTML;
html = html.replace( /aaaaaa./g,'<a href=\"http://www.google.com/');
html = html.replace( /.bbbbbb/g,'/world\">Helloworld</a>');
strMessage1.innerHTML = html;

answered Mar 25, 2013 at 15:22

Guffa

703k111 gold badges760 silver badges1k bronze badges

1 Comment

M21 Over a year ago

This works as well for me, but breaks the rest of the page from wherever it's put.

schlebe · Accepted Answer · 2025-04-20 19:19:33Z

-1

Your code is malfunctioning at the first replace() line.

I write line because the code isn't malfunctioning on replace() function but on assignment !

If you simply write

var s = "<a"; // s for string

variable s is assigned to "<a" string;

But if you write

var e.innerHTML = "<a"; // e for element

inner HTML of element e don't contains anything.

Assignment is refused because "<a" assigned value represent a HTML element's part that is not complete.

JavaScript refuses to assign "<a" value to prevent DOM from being temporarily inconsistent !

var e2 = document.getElementById("element2") ;
e2.innerHTML= "<a";
console.log("e2.innerHTML: [" + e2.innerHTML + "]"); 

var e3 = document.getElementById("element3");
e3.innerHTML= "<a>";
console.log("e3.innerHTML: [" + e3.innerHTML + "]"); 

var e4 = document.getElementById("element4") ;
e4.innerHTML= "<a href='#section'>hyperlink</a>";
console.log("e4.innerHTML: [" + e4.innerHTML + "]");

<div>
    <span>[</span>
    <span id="element1">aaaaaa/cat/bbbbbb</span>
    <span>] initial</span>
</div>
<div>
    <span>[</span>
    <span id="element2">aaaaaa/cat/bbbbbb</span>
    <span>] cleared</span>
</div>
<div id="a-tag-empty">
    <span>[</span>
    <span id="element3">aaaaaa/cat/bbbbbb</span>
    <span>] copied but empty display</span>
</div>
<div id="a-tag-full">
    <span>[</span>
    <span id="element4">aaaaaa/cat/bbbbbb</span>
    <span>] ok</span>
</div>

edited Apr 20 at 19:19

answered Apr 20 at 17:18

schlebe

3,8395 gold badges44 silver badges60 bronze badges

2 Comments

InSync Apr 20 at 18:26

var e.innerHTML = "<a"; is invalid syntax. Plus, "[a]ssignment is refused" is at worst wrong and at best misleading because the assignment itself works and does not cause any errors. It is the browser that strips out the stray <a.

schlebe Apr 20 at 19:20

@lnSync: yes the las sentence is confuse, I changed it.

Collectives™ on Stack Overflow

Why does my innerHTML disappear when replacing it?

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related