Question 412827 in Html Question posted in
Some basic documentation can be found here.

Html – Changing the text of a span element with no Id

I am very new to this so please bear with me.

I’m trying to change the inner HTML of this span:

<span translate="my_team_tab" class="ng-scope">My Team</span>

on page load.

I would like to change the "My Team" text to "My Event". I’ve been looking for hours and nothing seems to be working. Maybe it’s not possible? Like I said, I’m new and would not know otherwise.

Thank you!

I haven’t been able to try anything because almost all solutions mention using an Id and there is no Id assigned to this element. This code is hardcoded into the system I’m working in so I can’t change the HTML itself.

Tags:

5

Answers


  1. 0

    This will fix the Original Poster particular case only:

    document.addEventListener('readystatechange', readyEvent => {
  if (document.readyState == 'complete') {
    const allSpans = document.querySelectorAll('span');

    for (const span of allSpans) {
      if (span.textContent == 'My Team') {
        span.textContent = 'My Event';

        // Or...
        // span.innerHTML = '...';
      }
    }
  }
});
    <div>
  "<code><span>My Team</span></code>"
  <span>was "<code>My Team</code>".</span>
</div>
    Login or Signup to reply.
  2. 0

    Typically, you can change the content using javascript.
    You said:

    I’m trying to change the inner HTML of this span… on page load.

    Assuming you’re doing it using javascript it should look something like:

    window.onload = function() {
  // This will get all the spans in the page!
  // If the text is exactly present in more than one span
  // it will be replaced in all occurrences!
  let spans = document.getElementsByTagName("span");
  for( let i = 0; i < spans.length; i++){
    if(spans[i] && spans[i].innerText == "My Team" ){
      spans[i].innerText = "My Event";
    }
  }
};

    However if this is something that you should do for multiple spans with different texts, it could be helpful to write a generic function for it.

    Login or Signup to reply.
  3. 0

    You can do this with CSS if absolutely necessary.

    span[translate="my_team_tab"] {
  font-size: 0;
}

span[translate="my_team_tab"]:after {
  content: "My Event";
  font-size: initial;
}
    <span translate="my_team_tab" class="ng-scope">My Team</span>
    Login or Signup to reply.
  4. 0

    First, I defined a constant for language, you may infer the language differently. Then, I defined a translateMap with keys representing the values of translate and values representing a map of languages and their value in the given language.

    Finally, I search for all translatable, that is, elements having a translate attribute, loop them and if the given element has a translation in the given language, then setting innerText to the translation:

    const language = "en";
const translateMap = {
    my_team_tab: {
        en: "My Event"
    }
};
window.addEventListener("load", function() {
    for (let translatable of document.querySelectorAll("[translate]")) {
        if (translateMap[translatable.getAttribute("translate")][language]) {
            translatable.innerText = translateMap[translatable.getAttribute("translate")][language];
        }
    }
});
    <span translate="my_team_tab" class="ng-scope">My Team</span>
    Login or Signup to reply.
  5. 0

    You can select the element by Specific Tag Value:

    const item = document.querySelector('[translate="my_team_tab"]');
item.innerText = 'Hello World!';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search