Question

How do I create a second logical structure with Javascript.

Is a webpage, and when it’s loading (DOM fully don’t ready yet) is executing javascipt code where:

<script>
if(window.innerWidth>900){

 /* show huge HTML with javascript stuff here */

} else {

 /* show huge HTML with javascript stuff here */

}
</script>

I want have something similar with second code example in PHP language:

<? if(true){ ?>
/* show huge HTML with javascript stuff here */
<? } else { ?>
/* show huge HTML with javascript stuff here */
<? } ?>

I need possibility to have different javascript code with html on initialising window width, when page loads.

Answer 1

That is not the way JS works. You could of course print the html inline here, but this will create a hell of a mess in your code. I would strongly discourage this. If you need this kind of templating capabilities, you are better off using some templating engine.

For example there is EJS, which allows you to write separate html templates with JS includied. Basically you load the template, pass your data to it, render the html and insert it into the DOM tree. This allows you to keep your code pretty clean.

http://embeddedjs.com/