如何只更改“inner.html”的一部分？

Question

我有這個計數器，它根據要求 - 向后或按升序計數，它工作得很好但是我想顯示文本以及每個數字，因為它們正在被計數 - 但是一旦有一個文本就會改變改變。 所以問題是 - 我怎樣才能有一個只影響它的一部分而不是全部內容的 innerhtml。 我希望文本保持原樣。

這里是 html 和 JS。

 <div class="container">
  <div class="number mt-3">100 **[I WANT TO ADD SOME TEXT HERE]** </div>
   
</div>

JS

    const numberEl = document.querySelector('.number');
let startNumber = parseInt(numberEl.innerHTML);
const endNumber = 0;

const ticker = setInterval(() => {
  numberEl.innerHTML = startNumber--;
  if(startNumber === endNumber - 1) {
    clearInterval(ticker);
  }
}, 200);

您還可以在此處找到代碼筆： https://codepen.io/kenkozma17/pen/XWdbdrd

Answer 1

您可以使用 += 到 append HTML 並使用<br>換行。

numberEl.innerHTML += "<br>" + startNumber--;

要僅更改倒計時數字，您可以將其包含在一個跨度內，讓您可以自由修改 div 中的其他文本。

<div class="number mt-3"><span>100</span> **[I WANT TO ADD SOME TEXT HERE]** </div>
<script>
numberEl.querySelector('span').innerHTML  = startNumber--;
<script>

Answer 2

你也可以這樣做：

 <div class="container"> <h2>This number will increment from 100 to 200</h2> <p><span class="number mt-3">100</span>Some text</p> </div>

Answer 3

你可以試試這個：

 const numberEl = document.querySelector('.number'); let startNumber = parseInt(numberEl.innerHTML); let extraText = document.querySelector('.number span').innerText; const endNumber = 200; const ticker = setInterval(() => { numberEl.innerHTML = (startNumber++) + extraText; if(startNumber === endNumber + 1) { clearInterval(ticker); } }, 100);

 .container { text-align: center; margin-top: 5em; }.number { font-weight: 500; font-size: 3em; }

 <div class="container"> <h2>This number will increment from 100 to 200</h2> <div class="number mt-3">100<span>&nbsp;&nbsp;Your Text</span></div> </div>

Answer 4

好的，我也會讓我的評論成為答案；）

@MohammadQasim 這里是向計數器添加字符串的想法；） http://codepen.io/gc-nomade/pen/OJNympB – G-Cyrillus 7 分鍾前

或@MohammadQasim http://codepen.io/gc-nomade/pen/yLOYboL ;) 如果您需要 HTML – G-Cyrillus 4 分鍾前的文本

• 用 innerHTML 添加另一個字符串

 const numberEl = document.querySelector('.number'); let startNumber = parseInt(numberEl.innerHTML); let txt=" My Text"; const endNumber = 200; const ticker = setInterval(() => { numberEl.innerHTML = startNumber++ + txt; if(startNumber === endNumber + 1) { clearInterval(ticker); } }, 100);

 .container { text-align: center; margin-top: 5em; }.number { font-weight: 500; font-size: 3em; }

 <div class="container"> <h2>This number will increment from 100 to 200</h2> <div class="number mt-3">100 </div> </div>

• 或者，如果您想從 HTML 模板中檢索它：

 const numberEl = document.querySelector('.number'); let startNumber = parseInt(numberEl.innerHTML); let txt=document.querySelector('.number span').textContent; const endNumber = 200; const ticker = setInterval(() => { numberEl.innerHTML = startNumber++ + txt; if(startNumber === endNumber + 1) { clearInterval(ticker); } }, 100);

 .container { text-align: center; margin-top: 5em; }.number { font-weight: 500; font-size: 3em; }

 <div class="container"> <h2>This number will increment from 100 to 200</h2> <div class="number mt-3">100 <span> text I want to keep & see </span></div> </div>

Answer 5

我會給出這個想法，只需將您的文本分隔在另一個帶有 ID 的 Div 中。

<div class="container">
  <div class="number mt-3">
     100        
  </div>
  <div id="changeSubContent">
    **[I WANT TO ADD SOME TEXT HERE]**
  </div>
</div>

然后您可以更改子內容：

document.getElementById("changeSubContent").innerHTML = "Your Text";

因此，您可以根據需要自定義每個 div 中的內容。

Answer 6

如果您只想在元素的開頭或結尾添加一些內容，您可能會查看.insertAdjacentHTML方法。

或者，如果您希望能夠重復定位 div 中的特定區域，您可以考慮在 div 中添加專用元素來保存特定的內容，如以下演示代碼所示：

 const numSpan = document.getElementById("numSpan"), textSpan = document.getElementById("textSpan"); let countdownNumber = parseInt(numSpan.textContent); const endNumber = 0; const ticker = setInterval(() => { numSpan.textContent = countdownNumber--; if (countdownNumber === endNumber - 1) { showBlastoff(); clearInterval(ticker); } }, 200); function showBlastoff() { textSpan.textContent = "-- Blastoff;!!"; }

 <div class="container"> <div class="number mt-3"> <span id="numSpan">30</span> <span id="textSpan">... and counting down...</span> </div> </div>