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

Html – Replace a text of a span element inside an a tag using JavaScript

How can I replace the word "Pipelines" to "NewText" in the following HTML code using JavaScript?

<a href="/v2/location/wrbZF5pqYXJwNagoqTEO/settings/pipeline" class="w-full group px-3 flex items-center justify-start sm:justify-center md:justify-center lg:justify-start xl:justify-start text-sm font-medium rounded-md cursor-pointer font-medium opacity-70 hover:opacity-100 py-2 md:py-2" id="sb_pipeline" exact-path-active-class="exact-path-active-class" meta="pipeline">
<!---->
<span class="hl_text-overflow hidden md:hidden nav-title lg:block xl:block hl_force-block"> Pipelines </span>
<!----><!----><!----></a>

I’ve tried using the following code to change the text content of the span element inside the a tag, but it didn’t work document.getElementById("sb_pipeline").getElementsByTagName("span")[0].textContent = "New Text";

Tags:

2

Answers


  1. 0

    Here is a simpler and much plausible way to go around your question.

    <a href="/v2/location/..." class="w-full..." id="sb_pipeline" exact-path-active-class="exact-path-active-class" meta="pipeline">
    <span class="hl_text-overflow..."> Pipelines </span>
</a>

    let element = document.querySelector("#sb_pipeline span")
element.innerText = "New Text";
    Login or Signup to reply.
  2. 0

    Try using the following script

        <a
  href="/v2/location/wrbZF5pqYXJwNagoqTEO/settings/pipeline"
  class="w-full group px-3 flex items-center justify-start sm:justify-center md:justify-center lg:justify-start xl:justify-start text-sm font-medium rounded-md cursor-pointer font-medium opacity-70 hover:opacity-100 py-2 md:py-2"
  id="sb_pipeline"
  exact-path-active-class="exact-path-active-class"
  meta="pipeline"
>
  <!---->
  <span
    class="hl_text-overflow hidden md:hidden nav-title lg:block xl:block hl_force-block"
  >
    Pipelines
  </span>
  <!----><!----><!----></a
>

<script>
   document.querySelector("#sb_pipeline .nav-title").innerText = "New Text";
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search