Replacing text on web page using HTML or Javascript

Question 1

I am customizing an HTML page provided and hosted by a third-party, so I am severely restricted in what I can do to the page. On the page there is a navigation menu that looks like this.

<ul class='nav'>
 <li class='active'>
 <a href='/affiliate'>
 <span id='affiliate-nav-homepage'>
 <span class='default'>Home Page</span>
 </span>
 </a>
 </li>
 <li>...

Question: How can I make the above snippet display the text "Home" instead of "Home Page", if all I am allowed to do is add a <style> element in the page <head>; and add some HTML code (which may include Javascript) near the start of the page?

I have a considered going down one of these two paths, but both paths are problematic.

1) Use CSS to hide their text ("Home Page"). Add my own text ("Home") using :before or :after pseudo-selectors.

display: none is probably not a good way to hide the text, because browsers that don't understand :before and :after will still understand display: none and I will end up with no text at all.

Are there better CSS alternatives for me? Change font size to 0? change text color? Manipulate z-index somehow? It is OK if some older browsers display the text "Home Page". It is not OK if some browsers display "Home Page Home", or if some browser do not display any text at all.

-- OR --

2) Use Javascript to manipulate the DOM

The difficulty with Javascript is that I can only insert it near the start of the page body before the elements that I want to modify. I could hook an event that fires after the entire page is loaded, but I want to avoid the page text flashing (the text "Home Page" being displayed briefly and then changing to "Home"). Is there such an event and how would I hook it?

Thank you for you help.

Question 2

No browser you would want to support does not support :before. However, that's not to say it's a good solution here.

Question 3

Good to know. Does this include mobile browsers? Is :before part of CSS2, CSS3?

Question 4

Yes it does. It's part of CSS2. See caniuse.com/#search=pseudo-elements. For IE8, you'll need to use :before (single colon).

Question 5

Anti flashing fix:

.default { display: none; }

Changing text and showing, when document is ready:

body.onload = function (){
 //getElementsByClassName not working in old browsers, so ...
 var el = document.getElementById('affiliate-nav-homepage').getElementsByTagName('span')[0];
 el.innerHTML = 'Home';
 el.style.display = 'block';
};

Additional You can hide all content and show it after all javascript changes by this method.

This is not elegant solution, but as You say, You have limited options to resolve Your problem.

Question 6

Thank you, Mateusz. Could you elaborate on the ".default { display: none; }" antiflashing fix. Would I undo "display: none" in Javascript? If so, is there a way to set "display: none" also in Javascript? This way if Javascript is not available, I would still display something.

Question 7

Yes, You can hide .default element in javascript, but as You saying, u have access only to javascript code, before all elements, so no. So if u dont want hide this element, just delete css rule, and remove el.style.display = 'block'; code line from javascript.

Question 8

If I used Javascript to add an additinal <style>.default { display: none; }</style> element to head, do you expect it would work well?

Question 9

I think it not will be problem.

Question 10

In JavaScript

window.addEventListener("load", function(){
 document.querySelector("span.default").textContent = "Home";
 //using document.querySelector to select the span with classname default
 //using textContent to change the content of the node.
}, false);

In a script block will do it.

This will execute on page load. This will be executed so fast that in almost all cases you won't see text jumping.

Example:

window.addEventListener("load", function(){
 document.querySelector("span.default").textContent = "Home";
}, false);

<ul class='nav'>
 <li class='active'>
 <a href='/affiliate'>
 <span id='affiliate-nav-homepage'>
 <span class='default'>Home Page</span>
 </span>
 </a>
 </li>
</ul>

When your page loading becomes slowed by other resources, @Mateusz Mania's idea of using CSS to hide the element and bring it up again is actually pretty nice. I would suggest using opacity: 0 or visibility: hidden instead of display:none since the latter will remove the element from the page and when it becomes visible again it will make the content jump down below it.

Exploring the CSS option

#affiliate-nav-homepage:before{
 content: "Home";
}
.default {
 display: none;
}

<ul class='nav'>
 <li class='active'>
 <a href='/affiliate'>
 <span id='affiliate-nav-homepage'>
 <span class='default'>Home Page</span>
 </span>
 </a>
 </li>
</ul>

Question 11

Thank you, Mouser. For your CSS solution, is there a danger that a browser will support "display: none", but not the :before pseudo-element? If so, can I use Javascript to test for browser support for these two features and then conditionally add the CSS styles (before the DOM is available)? Any idea how?

Question 12

@george :before is supported in all major browsers. Even on all modern mobile devices. Since IE9 so your good. IE8 is being phased out quickly.

Question 13

Thank you, Mouser. I ended up going with the other solution, so I will accept that answer. Both answers actually work. I wish I could accept both. Thank you for your help.

Mateusz Mania 8494 silver badges15 bronze badges · Accepted Answer · 2015-03-05 17:21:07Z

1

Anti flashing fix:

.default { display: none; }

Changing text and showing, when document is ready:

body.onload = function (){
 //getElementsByClassName not working in old browsers, so ...
 var el = document.getElementById('affiliate-nav-homepage').getElementsByTagName('span')[0];
 el.innerHTML = 'Home';
 el.style.display = 'block';
};

Additional You can hide all content and show it after all javascript changes by this method.

This is not elegant solution, but as You say, You have limited options to resolve Your problem.

Share

Improve this answer

answered Mar 5, 2015 at 17:21

Mateusz Mania's user avatar

Mateusz Mania

8494 silver badges15 bronze badges

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

4 Comments

George

George Over a year ago

Thank you, Mateusz. Could you elaborate on the ".default { display: none; }" antiflashing fix. Would I undo "display: none" in Javascript? If so, is there a way to set "display: none" also in Javascript? This way if Javascript is not available, I would still display something.

2015年03月05日T18:00:41.86Z+00:00

Mateusz Mania

Mateusz Mania Over a year ago

Yes, You can hide .default element in javascript, but as You saying, u have access only to javascript code, before all elements, so no. So if u dont want hide this element, just delete css rule, and remove el.style.display = 'block'; code line from javascript.

2015年03月05日T18:08:48.92Z+00:00

George

George Over a year ago

If I used Javascript to add an additinal <style>.default { display: none; }</style> element to head, do you expect it would work well?

2015年03月05日T18:12:41.29Z+00:00

Mateusz Mania

Mateusz Mania Over a year ago

I think it not will be problem.

2015年03月05日T18:15:02.207Z+00:00

CollectivesTM on Stack Overflow

Replacing text on web page using HTML or Javascript

2 Answers 2

4 Comments

In JavaScript

Exploring the CSS option

3 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

2 Answers 2

4 Comments

In JavaScript

Exploring the CSS option

3 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related