How to change only a part of an “inner.html”?

Question

I have this counter that based on the requirements - Counts backwards or in ascending order and It works just fine however I want to display text along with each of the numbers as they are shown being counted - however the text changes as soon as there is a change. So the question is - How can I have a innerhtml that only affects a part of it not the full content. I want the text to remain as it is.

here is the html and 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);

You can also find the codepen here: https://codepen.io/kenkozma17/pen/XWdbdrd

Answer 1

You can use += to append HTML and use <br> for a line break.

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

To only change the count down number, you could enclose it inside a span, leaving you free to modify other text in the 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

You could also do something like this:

 <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

You can try this:

 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

Okay, i'll make my comments an answer too;)

@MohammadQasim here is the idea of adding a string to the counter;) http://codepen.io/gc-nomade/pen/OJNympB – G-Cyrillus 7 mins ago

or @MohammadQasim http://codepen.io/gc-nomade/pen/yLOYboL ;) if you need the text from HTML – G-Cyrillus 4 mins ago

• add another string with 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>

• Or if you want to retrieve it from your HTML template:

 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

I will give the idea, Just separate your text in another Div with ID.

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

Then you can change the sub-content:

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

So you can customize the contents in each div as you want.

Answer 6

You might look at the .insertAdjacentHTML method if you just want to add some content at the beginning or end of an element.

Or if you want to be able to target specific areas within your div repeatedly, you might consider adding dedicated elements inside the div to hold specific pieces of content, as shown in this demo code:

 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>