Skip to content

How to display a dynamic text any where on a html page

How do i display a text anywhere on a html page

I want to achieve something like this


{{title}} // there will be more than one like this one

If something like this is available anywhere on the page it should display ​”This is the title” ​so if i change the “This is the title” the {{title}} should also change

I know don’t know much about this but i guess this is possible with javascript



<div id="updatable">
    My name is  {{NAME}}  and i am {{AGE}} yrs old . I love to play {{GAME}} and my hobbies include {{HOBBIES}} .


  class Template {

    constructor(element, obj) {
      this.element = element;
      this.state = obj;

    initState = function () {
      this.element = document.querySelector(this.element);

    #setState() {
      const obj = this.state;
      Object.entries(obj).forEach(pair => {
        this.element.innerHTML = this.element.innerHTML.replaceAll('{{'+ pair[0] +'}}', `<span data-var="${pair[0]}"> ${pair[1]} </span>`)

    updateState = function (obj) {
      Object.entries(obj).forEach(pair=> {
        let key = pair[0]
        let value = pair[1]
        this.state[key] = value;
      let template_elements = document.querySelectorAll('[data-var]');
      template_elements.forEach(template_element => {
        let attr = template_element.getAttribute("data-var");
        template_element.innerText = this.state[attr];


  const app = new Template("#updatable", {
    QUOTE: "Coolest person in world ? ya that's me  :-)",
    NAME: "sanmeet",
    GAME: "football",
    HEADING: "About Me",
    AGE: 19,
    HOBBIES: "Coding and doing cool stuff",

  // Initialize the functionality

  // Updating variables

  setTimeout(function() {
      GAME: "chess",
      HEADING: "Really about me ! "
  }, 2000);