Question

The following code can add div elements to the body. But sometimes the HTML is very long. If it is very long like 300 lines html codes, writing it like this is pratty hard:

$("body").append($("<div id='dzndiv'><div style='position:absolute;left:0px;top:0px;width:100%;height:800px;'><img src='img/transparent.png' width='100%' height='100%'/></div>");    

I think it should be like this:

$("body").append($.load("longstuff.html");

How can I do this? But important thing html codes can have space between tags.

Answer 1

You can use this:

$.get('longstuff.html', function(data) {
    $('body').append(data);
}, 'html');

However, if you always/often need that HTML and it is static a pretty common way to store it without loading it via AJAX is using script tags:

<script type="text/html" id="long-stuff">
    <!-- simply put your HTML here -->
</script>

You can then access it via $('#long-stuff').html()

Depending on what you want to do another option would be simply putting the HTML at the place where it belongs and hide it using style="display: none;" and then .show() it later.