JavaScript replaceChild

garrettroyce

garrettroyce

Community Support
Community Support
Messages
5,609
Reaction score
250
Points
63
I would like to use javascript to check if a certain html element is empty (I know it sounds ridiculous, just go with it :p)

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!
 
Last edited:
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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

t2t2t

New Member
Messages
690
Reaction score
0
Points
0
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>
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
t2t2t said:
In the example case just a simple .innerHTML check should work:
Click to expand...

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

garrettroyce

Community Support
Community Support
Messages
5,609
Reaction score
250
Points
63
I decided to go another route with this, thanks anyways!
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
Out of curiosity (and for those reading this thread looking for help), what route did you take?
 
garrettroyce

garrettroyce

Community Support
Community Support
Messages
5,609
Reaction score
250
Points
63
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 :p

EDIT:
Sweet, X10 Lieutenant status and 1234 credits :)
 
Last edited:
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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.
 
You must log in or register to reply here.
Top