What is the best way to update a section of an HTML file without changing the entire "inner.html"?

Question

What is the best way to update a section of an HTML file without changing the entire "inner.html"?

I'm working on a counter that can either count backwards or in ascending order based on requirements. The counter is functioning correctly, but I want to add text to accompany each number as it counts. The issue is that the text changes every time there's a change in the countdown. How can I modify the inner HTML of only part of the content without affecting the entire display? I need the text to remain constant.

Here is the HTML and JS code:

<div class="container">
  <div class="number mt-3">100 **[I WISH TO INSERT 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 access the codepen example here: https://codepen.io/kenkozma17/pen/XWdbdrd

javascript html css

Answer 1

Answer №1

If you want to add additional text in the countdown display, you can use the += operator to append HTML and insert a line break by using <br>.

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

To customize the appearance of the countdown number, enclose it within a span tag inside the parent div, allowing for easy modification of other text elements.

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

Answer 2

If you want to add additional text in the countdown display, you can use the += operator to append HTML and insert a line break by using <br>.

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

To customize the appearance of the countdown number, enclose it within a span tag inside the parent div, allowing for easy modification of other text elements.

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

Answer 3

Answer №2

There's another option if you want to achieve a similar result:

<div class="container">
  <h2>Watch as this number goes up from 100 to 200</h2>
  <p><span class="number mt-3">100</span>Some additional information here</p>
</div>

Answer 4

There's another option if you want to achieve a similar result:

<div class="container">
  <h2>Watch as this number goes up from 100 to 200</h2>
  <p><span class="number mt-3">100</span>Some additional information here</p>
</div>

Answer 5

Answer №3

If you want to give this a shot, follow these steps:

const numElement = document.querySelector('.number');
let initialNum = parseInt(numElement.innerHTML);
let additionalText =  document.querySelector('.number span').innerText;
const finalNum = 300;

const counter = setInterval(() => {
  numElement.innerHTML = (initialNum++) + additionalText;
  if(initialNum === finalNum + 1) {
    clearInterval(counter);
  }
}, 100);

.container {
  text-align: center;
  margin-top: 8em;
}

.number {
  font-weight: 700;
  font-size: 2.5em;
}

<div class="container">
  <h2>Watch as this number rises from 200 to 300</h2>
  <div class="number mt-5">200<span>&nbsp;&nbsp;Your Label</span></div>
</div>

Answer 6

If you want to give this a shot, follow these steps:

const numElement = document.querySelector('.number');
let initialNum = parseInt(numElement.innerHTML);
let additionalText =  document.querySelector('.number span').innerText;
const finalNum = 300;

const counter = setInterval(() => {
  numElement.innerHTML = (initialNum++) + additionalText;
  if(initialNum === finalNum + 1) {
    clearInterval(counter);
  }
}, 100);

.container {
  text-align: center;
  margin-top: 8em;
}

.number {
  font-weight: 700;
  font-size: 2.5em;
}

<div class="container">
  <h2>Watch as this number rises from 200 to 300</h2>
  <div class="number mt-5">200<span>&nbsp;&nbsp;Your Label</span></div>
</div>

Answer 7

Answer №4

Of course, I'll transform my comments into an answer too :)

@MohammadQasim, check out this idea of appending a string to the counter: http://codepen.io/gc-nomade/pen/OJNympB – G-Cyrillus 7 mins ago

Alternatively, @MohammadQasim, visit http://codepen.io/gc-nomade/pen/yLOYboL if you require the text from HTML – G-Cyrillus 4 mins ago

Include another string using 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 prefer to extract 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 8

Of course, I'll transform my comments into an answer too :)

@MohammadQasim, check out this idea of appending a string to the counter: http://codepen.io/gc-nomade/pen/OJNympB – G-Cyrillus 7 mins ago

Alternatively, @MohammadQasim, visit http://codepen.io/gc-nomade/pen/yLOYboL if you require the text from HTML – G-Cyrillus 4 mins ago

Include another string using 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 prefer to extract 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 9

Answer №5

Here's a helpful tip: to customize the content in your text, simply put it inside another Div with an ID.

<div class="container">
  <div class="number mt-3">
     100        
  </div>
  <div id="changeSubContent">
    **[INSERT YOUR TEXT HERE]** 
  </div>
</div>

After that, you can easily modify the sub-content by using this JavaScript code:

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

This way, you have full control over the contents of each div according to your preferences.

Answer 10

Here's a helpful tip: to customize the content in your text, simply put it inside another Div with an ID.

<div class="container">
  <div class="number mt-3">
     100        
  </div>
  <div id="changeSubContent">
    **[INSERT YOUR TEXT HERE]** 
  </div>
</div>

After that, you can easily modify the sub-content by using this JavaScript code:

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

This way, you have full control over the contents of each div according to your preferences.

Answer 11

Answer №6

If you are looking to dynamically add content to the beginning or end of an element, you may want to explore the .insertAdjacentHTML method.

For a more targeted approach within your div, consider incorporating specific elements inside the div to house individual pieces of content, like demonstrated in this code snippet:

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>

Answer 12

If you are looking to dynamically add content to the beginning or end of an element, you may want to explore the .insertAdjacentHTML method.

For a more targeted approach within your div, consider incorporating specific elements inside the div to house individual pieces of content, like demonstrated in this code snippet:

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>

What is the best way to update a section of an HTML file without changing the entire "inner.html"?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

The drop-down menu is failing to display the correct values in the second drop-down

Using TypeScript and webpack 2 to integrate typeahead.js into your project

Using jQuery to retrieve the location of an element with a specific class

Choosing the type attribute of an input tag by using a javascript variable as a condition: What's the best approach?

The Issue of Missing HTML Registration Form Data in Django

Add Firebase Data to Dropdown

Bootstrap dropdown menu fails to expand

Passing Parameters to Razor Pages Controller

Soft keyboard on mobile fails to update when arrows are used in Ajax-populated dropdown menus

Combining DataTables with multiple tables sourced from various JSON arrays

Obtain the server-side cookie within the getServerSideProps function in Next.js

Tips for accessing .js variables in .ejs files

Element within an element should be centered

unable to respond when clicking an angularjs link

Performing a modulo operation within a v-for loop

Tips for sequentially calling multiple await functions within a for loop in Node.js when one await is dependent on the data from another await

The Express.js main router is functioning properly, however, the other routers connected to it are experiencing

React in response after waiting for the DOM element - Reactjs

AngularJS - Filter out items from ng-repeat that match specific string criteria

Stop Bootstrap from impacting a specific division on my webpage