小贝子编程

向现有文本元素添加文本.按类名选择



我正试图将文本添加到现有的HTML中，我将通过API返回。

我有问题，弄清楚如何我可以添加文本到现有的文本，如果没有涉及id。例如下面是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>

我想在每个数字范围后面添加单词Sales。例如:

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

我试图这样做，通过做一个document.querySelector('.highcharts-axis-labels');和编辑innerHTML，但这改变了整个文本。是否有可能在数字范围的末尾添加Sales而不删除数字范围?

下面是一个代码示例: 

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>

为每个添加内容的hilables的子元素循环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>

您也可以通过选择特定类别.highcharts-axis-labels的所有text元素，并使用:after和content插入您的word想要添加* 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>

应该可以。

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>

而不是:

hilables.innerHTML = "Sales";

你应该把

hilables.innerHTML += " Sales";

这个附加了"Sales">

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium