JavaScript replaceChild

garrettroyce · Mar 18, 2009

I would like to use javascript to check if a certain html element is empty (I know it sounds ridiculous, just go with it

)

So this:

Code:

<p id="checkme"></p>

Will be replaced with this:

Code:

<p id="checkme">There was no text here, but now there is!</p>

I tried this, but it didn't work:

Code:

<p id="checkme"></p>
<script type="text/javascript">
      var old = document.getElementById("checkme").firstChild; 
      var new = document.createTextNode("TEST"); 
      if(old.length == 0)
      { 
            document.getElementById("checkme").replaceChild(new, old);
      }
</script>

Any idea of how I can do this?

The way I'm trying to do this requires the <script ...> directly before or after the <p> tag, although adding a script to the <head> is possible too.

Thanks!

misson · Mar 22, 2009

Test "node.childNodes.length". Use "appendChild()".

If a node has no children, firstChild should be "null". You can also test node.childNodes.length.

replaceChild(...) won't work on a node with no children because there are no children to replace. Use appendChild(...).

t2t2t · Mar 22, 2009

In the example case just a simple .innerHTML check should work:

HTML:

<p id="checkme"></p>
<script type="text/javascript">
if(!document.getElementById('checkme').innerHTML) document.getElementById('checkme').innerHTML = 'There was no text here, but now there is!'
</script>

misson · Mar 22, 2009

t2t2t said:
In the example case just a simple .innerHTML check should work:

True, but innerHTML isn't as future proof. On the other hand, it's usually more efficient, though the difference in efficiency won't be noticeable in the example. This isn't to say the OP shouldn't use innerHTML, zhe should just be sure to understand the consequences, good and bad. "Alternatives to innerHTML" and "The innerHTML dilemma" have more information.

garrettroyce · Mar 24, 2009

I decided to go another route with this, thanks anyways!

misson · Mar 24, 2009

Out of curiosity (and for those reading this thread looking for help), what route did you take?

garrettroyce · Mar 25, 2009

Well, what I was trying to do is to develop a way to avoid the sometimes blank advertisement from using the X10 advertisement code. I know it's against the TOS to modify the code, but I thought maybe if I could detect that the code had not output anything, that I could then input my own message, like "check out x10hosting.com." I know it's possible to do, but I decided that the risk of my code malfunctioning and always removing the ad and the risk that this might be seen as a modification of the x10 ad code was too great.

So, long story short, I simply did this:

Code:

<p><script src"x10 ad code blah blah blah /> -- Thank you sponsors!</p>

It's easy, guaranteed to work, guaranteed to not get me in trouble, and only a little bit ugly

EDIT:
Sweet, X10 Lieutenant status and 1234 credits

misson · Mar 25, 2009

Nice solution, actually.

Unlike innerHTML, Using appendChild would mean a script generated ad would never be replaced, but I'd only use that approach if the extra content really bugged you or messed up your design.

JavaScript replaceChild

garrettroyce

Community Support

misson

Community Paragon

t2t2t

New Member

misson

Community Paragon

garrettroyce

Community Support

misson

Community Paragon

garrettroyce

Community Support

misson

Community Paragon

Free Web Hosting

Our Community

Legal