'innerHTML' doesn't work

Question

I have currently this line in my page :

<p id="replaced">
    <a id="linkReplace" href="https://www.g2a.com/r/nowyoushare">
        <img src="images/ads.png" class="img-responsive" alt="" onmouseover="hover(this);" onmouseout="unhover(this);">
    </a>
</p>

So adblock detect and block my link and picture: image

So a created a test script with JavaScript but it doesn't work :/

Code :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/lightbox.min.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/main.js"></script> 
<script>
    if(document.getElementById('replaced').length == 0) {
        document.getElementById('replaced').innerHTML = 'chocolat';
    }
</script>

Can someone help me ? Thanks

Answer 1

I'm not able to understand what are you ting to achieve..can you explain it better?

BTW..

if(document.getElementById('replaced').length == 0) {
        document.getElementById('replaced').innerHTML = 'chocolat';
    }

Basically you are saying "if the element replaced doesn't exist, replace the content inside of it". How it could possibly work?

EDIT after the response from @bezoo

You could write something like that to create the element after checking if it exist.

 if(document.getElementById('replaced').length == 0) {
            var p = document.createElement('p');
            p.setAttribute("id", "replaced");
        }

and then do whatever you want with the innerhtml of the element you just created.

EDIT2 I misunderstood..

this code should work

if(document.getElementById('replaced').innerHTML == "") {
            document.getElementById('replaced').innerHTML = 'chocolat';
        }

Answer 2

But I want that if "replaced" is empty so add some content into

If you want to check if the content is empty so use .innerHTML.length :

if(document.getElementById('replaced').innerHTML.length == 0) {
    document.getElementById('replaced').innerHTML = 'chocolat';
}

Hope this helps.

---

Empty content case :

if(document.getElementById('replaced').innerHTML.length == 0) {
  document.getElementById('replaced').innerHTML = 'chocolat';
}

<p id="replaced"></p>

Answer 3

getElementById returns an HTML Element Node. It doesn't have a length property, so that property will never be equal to 0.

If you are trying to test if the element exists, then check that the return value is a true value:

if (document.getElementById('replaced'))