Include data from HTML file using JavaScript

Tram Ho

Introduce

Hello everyone, today I will introduce to you another problem I have encountered in the project. That is processing include data from HTML files into web content in JavaScript. Let’s analyze the requirements offline.

Request

Customers have built many modules (each module is similar to a customer service website) and these modules are running simultaneously, but the header / footer is the same for all modules. Therefore, this header / footer part wants to split into 2 separate files for easy editing later. All modules are updated.) To ensure CSS / JS of header / footer, KH chose to write internal CSS / JS.

Perform

With the above requirements, I will handle as follows:

  • Write HTML code, position markup to include header and footer
  • Write the JS code to get data from the HTML file of the header / footer specified for insertion and the highlighted location Let’s see the code I have made

HTML

I marked the header / footer position as the code below, and passed the class as include-html and attribute data-file as the path of the HTML file that I need to include.

Javascript

I will add internal javascript in the above HTML file and have comments inside the code

Conclude

Above is the problem I met and how to handle it, thank you for following this article. Hope it is a case study for your reference 😃 .

Reference source

w3school

Share the news now

Source : Viblo