Hello! I ask for your help or “pink” in the right direction and do not scold much with JavaScript only at the study stage =)
There is a page

& lt; html & gt;
& lt; Head & gt;
& lt; script & gt;
var about_bears = "Bears - these are such large thick-paced animals, live in forests.";
var about_lions = "Lions are such large beasts from the cat's family, live in Africa.";
Var about_cats = "Cats are such small animals from the cat's family, long ago are domesticated by people, and therefore they even live on the ISS.";
& lt; / script & gt;
& lt; / Head & gt;
& lt; Body & gt;
& lt; a href = "#" OnClick = "Document.getelementByid ('div_for_insert'). Innerhtml = about_bears" & gt; bears & lt; / a & gt;
& lt; a href = "#" OnClick = "Document.getelementByid ('Div_For_insert'). Innerhtml = about_lions" & gt; lions & lt; / a & gt;
& lt; a href = "#" OnClick = "Document.getelementByid ('Div_For_insert'). Innerhtml = about_cats" & gt; cats & lt; / a & gt;
& lt; div id = "div_for_insert" & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Where when you click on the link, the script works and adds a test to the DIV. The question is how to make so that it would take more text. So – as if the text does not fit in the string, it transfers it to another for example:

var about_cats = "Cats are such small animals from the cat's family, (a lot of text and the text transfers to another line)
 Long ago are domesticated by people, and therefore, even inhabit even the ISS. ";

and it turns out that the script does not see the transferred text to another line.
Or if there is an opportunity to do so what would he take text from the file and also added to Div?

Answer 1, Authority 100%

What to do with a long string

Make this line from the Little Series:

var about_cats = "Cats - this ..." +
  "Long ago ..." +
  "In the distant prealt of galaxy ...";

In the future, it will be useful to store data separately from the code – JSON, XML files or data from the database will help

How to store and receive data separately:

1. Share in the public folder of your site Data.json with content:

   {
     "about_bears": "...",
     "About_lions": "...",
     "ABOUT_CATS": "..."
    }
   

2. Get data (for example, using jquery.ajax) and remember them:

   & lt; script & gt;
   Var MyTexts;
   $ .get ("Data.json", Function (DATA) {
     MyTexts = Data;
   });
   & lt; / script & gt;
   

3. Use the memorized data:

   (...). Innerhtml = MyTexts ["About_bears"]
   

Answer 2, Authority 33%

Multi-line text in JavaScript can be entered as follows:

var about_cats = "Cats are such small animals from the family" +
         "Casual, long ago domesticated by people," +
         "And, therefore, even inhabit the ISS.";

or so:

var about_cats = "Cats are such small animals from the family \
cat, long ago domesticated by people, \
And, therefore, even inhabit the ISS. ";

And you can also use the fact that several gap symbols in a row in HTML are displayed as one and write this:

var about_cats = "Cats are such small animals from the family \
         cat, long ago domesticated by people, \
         And, therefore, even inhabit the ISS. ";

(Symbol \ Must be the last in line!)

Answer 3, Authority 33%

A good tone is considered not to store content in the source code. Take output to separate files and get content through AJAX. The handler itself should be taken into a separate function, and you can get the desired data, for example, using jQuery. The name of the requested file can be taken out in a separate variable about.

// Universal content loading function in block
Window.LoadTXT = FUNCTION (About) {
 // asynchronous text file request
 jQuery.get ("Mystories /" + About + ". TXT", FUNCTION (CONTENT) {
  Document.getelementByid ('Div_For_insert'). Innerhtml = Content;
 });
};

HTML in this case will look like, as well as:

& lt; a href = "#" OnClick = "Loadtxt ('Cats'); Return False;" & gt; cats & lt; / a & gt;

Considering a better level, it is possible in principle to get rid of the ONCLICK attribute and hang events through the JavaScript code. Here I advise you to fully go to the jQuery functionality.

$ (document) .ready (function () {// by document readiness
  Var ThemeLoader = Function (About) {// Initialize the Loader function
   // asynchronous text file request
   jQuery.get ("Mystories /" + About + ". TXT", FUNCTION (CONTENT) {
    $ ('# DIV_FOR_INSERT'). HTML (CONTENT);
   });
  };
  $ ("A [theme]") // Find all a with attribute [Data-Theme]
  .Click (Function () {// Hold the CLICK Event handler on them
    ThemeLoader ($ (this) .attr ("Theme")); // Download the file with the name stored in the Data-Theme Attribute
  });
});

HTML does not remain anything except the data on the required files.

& lt; a href = "#" Data-Theme = "Cats" & gt; cats & lt; / a & gt;
& lt; a href = "#" Data-Theme = "Fleas" & gt; flea & lt; / a & gt;
& lt; a href = "#" Data-theme = "Midge" & gt; midge & lt; / a & gt;
& lt; div id = "div_for_insert" & gt; & lt; / div & gt;

Answer 4

And all the time did not figure it out with the addition of the text

file

& lt;! doctype HTML & gt;
& lt; html & gt;
& lt; Head & gt;
& lt; Title & gt; zodiacs & lt; / title & gt;
& lt; link href = "design / design.css" REL = "STYLESHEET" TYPE = "TEXT / CSS" / & GT; & lt;! - Connection of design - & gt;
& lt; script type = "text / javascript" src = "scripts / jQuery-2.1.4.min.js" & gt; & lt; / script & gt; & lt ;! - connection jqury Project I do in Visual Studia 2012 Library connected from the environment - & gt;
& lt; script type = "text / javascript" src = "scripts / dobavlenie.js" & gt; & lt; / script & gt; & lt;! - This is a function connection - & gt;
& lt; / Head & gt;
& lt; Body & gt;
& lt; div id = "body" & gt;
  & lt; div id = "Header" & gt;
    & lt; h1 & gt; site title & lt; / h1 & gt;
  & lt; / div & gt;
  & lt; div id = "Main" & gt;
    & lt; div id = "Menu" & gt;
      & lt; Table & gt;
        & lt; TR & GT; & lt; td & gt; & lt; a href = "#" Data-theme = "Cats" & gt; cats & lt; / a & gt; & lt; / td & gt; & lt; / tr & gt; & lt ;! - here we click the link- - & gt;
        & lt; tr & gt; & lt; td & gt; & lt; a href = "#" Data-theme = "CATS" & gt; flea & lt; / a & gt; & lt; / td & gt; & lt; / tr & gt;
        & lt; tr & gt; & lt; td & gt; & lt; a href = "#" Data-Theme = "CATS" & gt; spoons & lt; / a & gt; & lt; / td & gt; & lt; / tr & gt;
      & lt; / Table & gt;
    & lt; / div & gt;
    & lt; div id = "content-2" & gt;
      & lt; div id = "div_for_insert" & gt; & lt;! - Here we get the text - & gt;

Function itself

$ (document) .ready (function () {// by document readiness
Var ThemeLoader = Function (About) {// Initialize the Loader function
  // asynchronous text file request
  jQuery.get ("Contents /" + about + ".txt", Function (Content) {// Contents This If I correctly understood the place where my documents lie
    $ ('# DIV_FOR_INSERT'). HTML (CONTENT);
  });
};
$ ("A [theme]") // Find all a with attribute [Data-Theme]
.Click (Function () {// Hold the CLICK Event handler on them
  ThemeLoader ($ (this) .attr ("Theme")); // Download the file with the name stored in the Data-Theme Attribute
});
});

A separate contents folder has been created in which the CATS.TXT file lies and when you click on the “Cat” link, nothing happens.