Is it possible to include HTML code in JavaScript?

Question

I have a basic question, can I include HTML code in JS? (with document.write)

This is my HTML code:

<li><a href="#" class="menulink">text</a></li>
<li><a href="#" class="menulink">text</a></li>
<li>
  <a href="#" class="menulink">text</a>
  <ul>
    <li>
      <a href="#" class="sub">text</a>
      <ul>
        <li class="topline"><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="sub">text</a>
      <ul>
        <li class="topline"><a href="#">text</a></li>
        <li><a href="#">text</a></li>
      </ul>
    </li>

    <li>
      <a href="#" class="sub">text</a>
    </li>
    <li>
      <a href="#" class="sub">text</a>
    </li>
  </ul>
</li>

<li>
  <a href="#" class="menulink">text</a>
</li>
<li><a href="#" class="menulink">text</a></li>

And I want to include it in this JS code:

window.onload = function () {
  document.getElementById("menu").innerHTML="";
}

Connect it by this code:

<p id="dropdown_menu"></p>

How can I do it?

The full code is here http://jsfiddle.net/tsnave/eSgWj/4/ thanks..

i changed the code... pleas help me... – Nave Tseva Aug 31 '12 at 14:36 — Nave Tseva, Aug 31 '12 at 14:36

Supr · Answer 1 · 2012-08-31T13:43:08.833

A different way of doing it is to put the HTML inside a script tag:

<script type="text/template" id="myHtml">
    <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>
</script>

Then you can get it into Javascript using

var myHtml = document.getElementById('myHtml').innerHTML;

or using one of several libraries which help you with this. Code inside a script tag with type="text/template" will not be interpreted or shown by the browser. The advantage of this approach over putting it straight into a string in Javascript is that it allows you to keep treating it as normal HTML in your editor, and it keeps the Javascript clean. See also this post by John Resig.

what is the difference between type="text/template" and type="text/Html" ? — niz_sh, Apr 13 '19 at 06:08

score 12 · Answer 2 · answered Aug 31 '12 at 13:32

can I include HTML code in JS?

If by that you mean can you output HTML via javascript then the answer is yes e.g.

window.onload = function() {
    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>';
}

score 4 · Answer 3 · answered Aug 31 '12 at 13:31

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>
';

All I really did was switch the quotes to single quotes so the HTML attributes don't mess the string up. If you did need to put single quotes in the innerHtml string, you can escape them with backslash, ie: innerHtml = ' Don\'t break me';

score 3 · Answer 4 · edited Aug 31 '12 at 13:33

3

You can do:

document.getElementById("menu").innerHTML="<div>hello</div>"

edited Aug 31 '12 at 13:33

ComFreek

29,044
18
104
156

answered Aug 31 '12 at 13:32

DadViegas

2,263
16
12

Krishna Kumar · Answer 5 · 2012-08-31T15:29:53.587

1

window.onload = function(){
    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>';
}

Edited:

It should work.

<script type="text/javascript">
window.onload = function(){
    document.body.innerHTML = 
        '<li><a href="#" class="menulink">text</a></li>'
        +'<li><a href="#" class="menulink">text</a></li>'
        +'<li><a href="#" class="menulink">text</a><ul>'
        +'<li><a href="#" class="sub">text</a><ul>'
        +'<li class="topline"><a href="#">text</a></li>'
        +'<li><a href="#">text </a></li><li><a href="#">text</a></li>'
        +'<li><a href="#">text</a></li><li><a href="#">text</a></li>'
        +'<li><a href="#"text</a></li><li><a href="#">text</a></li></ul>'
        +'</li><li><a href="#" class="sub">text </a><ul>'
        +'<li class="topline"><a href="#">text</a></li>'
        +'<li><a href="#">text</a></li></ul></li>'
        +'<li><a href="#" class="sub">text</a></li>'
        +'<li><a href="#" class="sub">text</a></li>'
        +'</ul></li><li><a href="#" class="menulink">text</a></li>'
        +'<li><a href="#" class="menulink">text</a>';

}

edited Aug 31 '12 at 15:29

answered Aug 31 '12 at 13:33

Krishna Kumar

2,101
1
23
34

1

I rolled-back the edit because JS doesn't support linebreaks in strings. – Florent Aug 31 '12 at 13:52
hi. thank you! i changes the code above and now your solution doesnt work... can you help me pleas? – Nave Tseva Aug 31 '12 at 15:08
1

make sure there is a html element with id="menu" and run this code after page loaded, modified the answer try it, should work. – Krishna Kumar Aug 31 '12 at 15:13
can you edit Please your code to match the current code which is above? I tried your first suggestion and the code did not work ... I would love for help .. Thank you! – Nave Tseva Aug 31 '12 at 15:20
the code in the "class="menulink"" works good!! but the other codes arn't working... and your sokution works only if i change the JS code to : document.getElementById("menu").innerHTML if not it won't work... im really sorry for all these quastions but i am really need help thanks for all!! – Nave Tseva Aug 31 '12 at 15:44
i just posted for concept, you can use "document.getElementById("menu").innerHTML" in both cease should work. – Krishna Kumar Aug 31 '12 at 15:55
yes! here is the link. i want to put the html code of the dropdown menu into a JS code http://jsfiddle.net/tsnave/eSgWj/4/ – Nave Tseva Aug 31 '12 at 16:59
replace you ul#menu innerHTML before dropdown function fired.. http://jsfiddle.net/krishna_aim24/eSgWj/6/ – Krishna Kumar Aug 31 '12 at 17:20
this very harf for me. can you pleas write ther the correct code? thanks – Nave Tseva Aug 31 '12 at 17:34

Is it possible to include HTML code in JavaScript?

5 Answers5

Linked