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?

This may help you: https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file — xsami, Sep 13 '17 at 18:44
Possible duplicate of [Javascript import html is it possible?](https://stackoverflow.com/questions/4818854/javascript-import-html-is-it-possible) — Jino Shaji, Sep 13 '17 at 18:47

score 1 · Answer 1 · answered Sep 13 '17 at 18:45

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 its 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

score 0 · Answer 2 · answered Sep 13 '17 at 18:52

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

Inserting HTML text in js code

2 Answers2