我正在嘗試向 API 回傳的現有 HTML 添加文本。
如果不涉及 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
我嘗試通過執行 adocument.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>uj5u.com熱心網友回復：
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>uj5u.com熱心網友回復：
你也可以做到這一點與CSS選擇所有text特定類的元素.highcharts-axis-labels，并與:after和content插入你的話要加*銷售*
<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>uj5u.com熱心網友回復：
這應該有效。
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>uj5u.com熱心網友回復：
代替：
hilables.innerHTML = "Sales";
你應該把
hilables.innerHTML = " Sales";
這會將“Sales”字串附加到innerHTML 的末尾。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/336578.html
標籤：javascript html css
上一篇：為什么這個javascript正則運算式回傳null？
下一篇：使用按鈕更改填充顏色