Inserting HTML text in js code

Question

How do I import a html file in to javascript code?

Currently I have to do something like:

document.getElementById("menu").innerHTML = '<li class="topline"><a href="#">some text</a></li>  
                <li><a href="#">some text </a></li>  
                <li><a href="#">some text</a></li>  
                <li><a href="#">some text</a></li>  
                <li><a href="#"some text</a></li>  
                <li><a href="#">some text</a></li>  
                <li><a href="#">some text</a></li>';

How do I separate the js code and html code in to separate files. Later load the html code into javascript easily?

You mean that you want to have that particular <li>...</li> code in a separate html file so you can get it to use? — Dejan.S
– Dejan.S, Commented Sep 13, 2017 at 18:45
Possible duplicate of Javascript import html is it possible? — Jino Shaji
– Jino Shaji, Commented Sep 13, 2017 at 18:47

halfer · Accepted Answer · 2024-07-02 19:25:03Z

1

You can do this. Taken from the below reference link.

You need to put the ul and li tags inside a file called import.htm, also it needs to be in the same place as the current file.

var ajax = new XMLHttpRequest();
ajax.open("GET", "import.htm", false);
ajax.send();
document.getElementById("menu").innerHTML += ajax.responseText;

Reference:

JavaScript import HTML

edited Jul 2, 2024 at 19:25

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Sep 13, 2017 at 18:45

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr. Pyramid · Accepted Answer · 2017-09-13 18:52:18Z

0

Just like this

$("#menu").load('menu.html #menulist');

then in HTML file do this

<ul id ="menulist">
<li class="topline"><a href="#">some text</a></li>  
<li><a href="#">some text </a></li>  
<li><a href="#">some text</a></li>  
<li><a href="#">some text</a></li>  
<li><a href="#"some text</a></li>  
<li><a href="#">some text</a></li>  
<li><a href="#">some text</a></li>
</ul>

For better reference

Click Here

answered Sep 13, 2017 at 18:52

Mr. Pyramid

3,9355 gold badges35 silver badges57 bronze badges

Collectives™ on Stack Overflow

Inserting HTML text in js code

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related