Question

I am wondering if it is better to put your html in javascript or in your html files.

For example having my js file have this

$('<div>').addClass('test').append(
                        $('<p>').text('test1'),
                        $('<span>').text('test2'),
                        $('<span>').text('test3')
                      ).insertAfter( $('#test1') );

VS

My html file looking like this

<div id="#test1"></div>
<div class="test">
    <p>test1</p>
    <span>test2</span>
    <span>test3</span>
</div>

and the js file have:

$(‘.test’).show();

Answer 1

Highly subjective and depends on contexts of course.

In a web page, most of the content is already known. No reason not to just put the content in the HTML and use CSS (and maybe Javascript when really needed) to style in.

In a web application, however, things are not so well known. The document is much more dynamic and using Javascript to add/remove elements is required.

BTW, your two pieces of code do two different things. In the first example you give it a class of test and in the second you are giving it an ID of #test1. This is an invalid ID and should be test1. The selector for that ID would be #test1 which may be causing some of the confusion.