10

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

1
  • i changed the code... pleas help me...
    – Nave Tseva
    Aug 31, 2012 at 14:36

5 Answers 5

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.

1
  • 1
    what is the difference between type="text/template" and type="text/Html" ?
    – niz_sh
    Apr 13, 2019 at 6:08
12

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

0
3

You can do:

document.getElementById("menu").innerHTML="<div>hello</div>"
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>';

}

9
  • 1
    I rolled-back the edit because JS doesn't support linebreaks in strings.
    – Florent
    Aug 31, 2012 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, 2012 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. Aug 31, 2012 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, 2012 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, 2012 at 15:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.