如何只更改“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>