Adding text to an existing text element. Selecting by class name-CodePudding

I'm attempting to add text to an existing HTML that I am getting returned to by an API.

I am having issues with figuring out how can I add text to the existing text if there are no ids involved. For example here is the HTML:

<g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7" aria-hidden="true">
<text x="159.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">0-4</text>
<text x="333.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">5-9</text>
<text x="508.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">10-19</text>
<text x="682.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">20-99</text>
<text x="857.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">100-499</text>
<text x="1031.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">500 </text></g>

I'd like to add the word Sales after each of the number ranges. For example:

0-4 Sales 5-9 Sales 10-19 Sales 20-99 Sales 100-499 Sales 500 Sales

I've attempted doing so by doing a document.querySelector('.highcharts-axis-labels'); and editing the innerHTML but that changes the entire text. Is it possible to just add Sales at the end of the number range without removing the number range?

Here is a code example:

  let hilables = document.querySelector('.highcharts-axis-labels');
  hilables.innerHTML = "Sales"
  console.log(hilables.innerHTML)

<g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7" aria-hidden="true">
<text x="159.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">0-4</text>
<text x="333.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">5-9</text>
<text x="508.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">10-19</text>
<text x="682.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">20-99</text>
<text x="857.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">100-499</text>
<text x="1031.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">500 </text></g>

CodePudding user response：

Loop through children elements of hilables for each one added your content Sales

<HTML>
    <BODY>
        <g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7" aria-hidden="true">
    <text x="159.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">0-4</text>
    <text x="333.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">5-9</text>
    <text x="508.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">10-19</text>
    <text x="682.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">20-99</text>
    <text x="857.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">100-499</text>
    <text x="1031.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">500 </text></g>
    </BODY>
    <SCRIPT>
        let hilables = document.querySelector('.highcharts-axis-labels');
        [...hilables.children].forEach(hilable=>hilable.innerText  = ' Sales')
    </SCRIPT>   
</HTML>

CodePudding user response：

You could also do that With CSS by selecting all text elements of specific class .highcharts-axis-labels and with :after and content insert your word want to add * Sales*

<HTML>
    <BODY>
        <g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7" aria-hidden="true">
    <text x="159.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">0-4</text>
    <text x="333.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">5-9</text>
    <text x="508.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">10-19</text>
    <text x="682.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">20-99</text>
    <text x="857.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">100-499</text>
    <text x="1031.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">500 </text></g>
    </BODY> 
    <STYLE>
        .highcharts-axis-labels text:after {
            content: ' Sales';
        }
    </STYLE>
</HTML>

CodePudding user response：

This should work.

var hilables1 = document.getElementsByClassName('highcharts-axis-labels1');
for (var i = hilables1.length - 1; i >= 0; i--)
{
hilables1[i].innerText = hilables1[i].innerText   " Sales";
}

<g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7" aria-hidden="true">
<text class="highcharts-axis-labels1" x="159.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">0-4</text>
<text class="highcharts-axis-labels1"x="333.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">5-9</text>
<text class="highcharts-axis-labels1"x="508.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">10-19</text>
<text class="highcharts-axis-labels1"x="682.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">20-99</text>
<text class="highcharts-axis-labels1"x="857.25" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">100-499</text>
<text class="highcharts-axis-labels1" x="1031.75" style="color:#11111;cursor:default;font-size:10px;font-family:roboto;font-weight:700;text-shadow:false;fill:#11111;" text-anchor="middle" transform="translate(0,0)" y="307" opacity="1">500 </text></g>

CodePudding user response：

Instead of:

hilables.innerHTML = "Sales";

You should put

 hilables.innerHTML  = " Sales";

this appends "Sales" string to the end of the innerHTML.