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
– Nave Tseva

2012-08-31 14:36:57 +00:00
Commented Aug 31, 2012 at 14:36 — Nave Tseva
– Nave Tseva, Commented Aug 31, 2012 at 14:36

Supr · Accepted Answer · 2012-08-31 13:43:08Z

16

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.

edited Aug 31, 2012 at 13:43

answered Aug 31, 2012 at 13:37

Supr

19.1k3 gold badges33 silver badges37 bronze badges

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

1 Comment

niz_sh Over a year ago

what is the difference between type="text/template" and type="text/Html" ?

James · Accepted Answer · 2012-08-31 13:32:25Z

13

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

answered Aug 31, 2012 at 13:32

James

82.4k19 gold badges172 silver badges245 bronze badges

Comments

Dunhamzzz · Accepted Answer · 2012-08-31 13:31:43Z

4

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

answered Aug 31, 2012 at 13:31

Dunhamzzz

14.8k4 gold badges54 silver badges74 bronze badges

Comments

ComFreek · Accepted Answer · 2012-08-31 13:33:11Z

3

You can do:

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

edited Aug 31, 2012 at 13:33

ComFreek

29.5k18 gold badges107 silver badges157 bronze badges

answered Aug 31, 2012 at 13:32

DadViegas

2,29117 silver badges12 bronze badges

Comments

Krishna Kumar · Accepted Answer · 2012-08-31 15:29:53Z

2

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, 2012 at 15:29

answered Aug 31, 2012 at 13:33

Krishna Kumar

2,1311 gold badge23 silver badges34 bronze badges

9 Comments

Florent Over a year ago

I rolled-back the edit because JS doesn't support linebreaks in strings.

Nave Tseva Over a year ago

hi. thank you! i changes the code above and now your solution doesnt work... can you help me pleas?

Krishna Kumar Over a year ago

make sure there is a html element with id="menu" and run this code after page loaded, modified the answer try it, should work.

Nave Tseva Over a year ago

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 Over a year ago

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

|

Collectives™ on Stack Overflow

Is it possible to include HTML code in JavaScript?

5 Answers 5

1 Comment

Comments

Comments

Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related