在JavaScript中加载大量HTML

Question

How can I load large amounts of HTML in javascript? I will show a snippet below. I want to get all the HTML into the "ALL HTML GOES HERE" space in the java. I know you can put smaller things like <h1>Hello!</h1> but I can't figure out how to get all of that into there with it working. Unless there is another way to do this let me know.

  function validate() { var x = $('#in').val(); if (navigator.userAgent.indexOf("Chrome") != -1) { $('#id').html('ignore'); } else { $('#id').html('ALL HTML GOES HERE'); } } window.onload = validate; 

 <div id="popup" class="overlay"> <div class="popup"> <a class="close" href="javascript:popupClose();">×</a> <div class="content"> </div> </div> </div> 

Answer 1

Instead of putting the HTML in a Javascript string, put it in the page's HTML, but hide it with display: none; style. Then you can copy it to #id .

 function validate() { var x = $('#in').val(); if (navigator.userAgent.indexOf("Chrome") != -1) { $('#id').html('ignore'); } else { $('#id').html($("#allhtml").html()); } } window.onload = validate; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="popup" class="overlay"> <div class="popup"> <a class="close" href="javascript:popupClose();">×</a> <div class="content"> </div> </div> </div> <div id="allhtml" style="display: none;"> <div> ALL HTML GOES HERE </div> </div> 

Answer 2

You can just pass it the entire string:

function validate() {
  var x = $('#in').val();
  var htmlString = '<div id="popup" class="overlay">';
  htmlString += '<div class="popup">';
  htmlString += '<a class="close" href="javascript:popupClose();">×</a>';
  htmlString += '<div class="content"></div></div></div>';

if (navigator.userAgent.indexOf("Chrome") != -1) {
  $('#id').html('ignore');
} else {
  $('#id').html(htmlString);
}

Answer 3

if you don't want to write all html inside ' ' , you could load html with ajax, so first you would create file

allhtml.html

containg your html, and there instead of your:

 $('#id').html..

you would use

$('#id').load('allhtml.html')

Answer 4

One option that can help:

You can put all the HTML in a separate HTML file and use JQuery's .load('anotherpage.html'....) method. Basically, you'd just call that like: $('#id).load('....');

Here's the documentation with examples http://api.jquery.com/load/