how to create template pages using html javascript and css

So I use php for my website and use include/require to add my header and footer to each page but im trying to build an app using phonegap which only allows html css and javascript how do i build a template header and footer without using php

so i have 5 pages that need the same header and footer but different content

how do i do this if i cant use php? or can i? open to all suggestions

<body>

<header>
This is my header
</header>

<content>
page content
</content>

<footer>
this is my footer
</footer>


</body>

Solution

You can still call a script that generate html code on a special element,

imagine you have a id #header on each page of your application that call your script which insert some greetings looking like this :

document.getElementById("#header").insertAdjacentHTML("afterbegin", "<h1>Hello there!</h1>");

<div id="#header"></div>

https://developer.mozilla.org/fr/docs/Web/API/Element/insertAdjacentHTML

I have made something similar in past :

const Component = function(props) {
  this.props = props;

  let _state = {};
  this.setState = state => (_state = state);
  this.getState = () => _state;
};

class Factory extends Component {
  constructor(props) {
    super(props);

    this.setState({
      template: this.setTemplate(this.props.template), //html
      action: this.props.template[this.props.action], // js
      templateState: this.props.action, // switch beetween html/js
      dom: {
        //dom elements
        header: document.querySelector("#header-pwd"),
        content: document.querySelector("#content-pwd"),
        info: document.querySelector("#info-pwd")
      }
    });

    this.clear(); // clear html
    this.getTemplate(); // insert template into dom
    this.getState().action(); // link onclick elements
  }

  getTemplate() {
    const template = this.getState().template;

    const header = this.getState().dom.header;
    const content = this.getState().dom.content;
    const info = this.getState().dom.info;

    header.insertAdjacentHTML("afterbegin", template.header);
    content.insertAdjacentHTML("afterbegin", template.content);
    info.insertAdjacentHTML("afterbegin", template.info);
  }

  setTemplate(template) {
    const getState = this.getState().templateState
      ? this.getState().templateState
      : this.props.action;
    const objectFilter = Object.keys(template)
      .filter(key => key[0] !== "_")
      .map(
        key =>
          template[key][getState]
            ? template[key][getState]
            : template[key]["_init"]
      );
    return {
      header: objectFilter[0],
      content: objectFilter[1],
      info: objectFilter[2]
    };
  }

  clear() {
    const dom = Object.values(this.getState().dom);
    for (let parent of dom) {
      if (parent.firstChild === null) continue;
      while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
      }
    }
  }
}

working with an object like this :

const pageTemplate = {
  header: {
    _init: `<h1>my header</h1>`
  },
  content: {
    _init: `<h1>my content</h1>`
  },
  info: {
    _init: `<h1>my footer</h1>`
  },
  _init: () => {
    /* your js logic like onclick action with your knew dom created */
  }
};
new Factory({ template: pageTemplate, action: "_init" });

Your html :

<div id="header-pwd"></div>
<div id="content-pwd"></div>
<div id="info-pwd"></div>