Writing HTML in JavaScript

You can create a template which can be read when required. By using script with "text/template" as type.

Here's an example.

    $(document).ready(function() {
      $('button').click(function() {
        $('#mydiv').append($('#templateId').html());
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>button</button>
<div id="mydiv">mydiv</div>

<script type="text/template" id="templateId">
  <div class="container">
    <div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
      <div class="panel-heading">Random1 - Random2</div>
      <div class="panel-body">
        <div>Random3</div>
      </div>
    </div>
  </div>
  </div>
</script>

You can write HTML-code in Javascript function inside in /* comment */ and convert this function to text with method functionname.toString() and parsig text between "/*" and "*/" that works in all old browsers. Example:

function myfunc()
{/*

<div class="container">
        <div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
            <div class="panel-heading">Random1 - Random2</div>
            <div class="panel-body">
                <div>Random3</div>
            </div>
        </div>
    </div>

*/}

function getLines(func)
{
var myhtml = func.toString();
var htmlstart = myhtml.indexOf('/*');
var htmlend = myhtml.lastIndexOf('*/');
return myhtml.substr(htmlstart+2, htmlend-htmlstart-2);
}

$('#mybtn').click(function () {
    $('#mydiv').append( getLines(myfunc) );
});

This simple trick can be used also for sending XML, HTML or plain text via JSONP .

Generally, it's not the best idea to mix interests (HTML, JS, CSS). Keep it separate and use templating engines. However, of course you can put HTML into your Javascript files, I would format it properly.

var myTMPL = '<div class="container">' +
                  '<div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">' +
                       '<div class="panel-heading">Random1 - Random2</div>' +
                       '<div class="panel-body">' +
                           '<div>Random3</div>' +
                       '</div>' +
                  '</div>' +
             '</div>';

and then use it like

$('#mydiv').append( myTMPL ); 

You could try having the html as a hidden element on the page and insert that. It tidies it up a bit:

<div id="myOtherDiv" style="display: none;">
    <div class="container">
        ....... rest of html
    </div>
</div>

script:

$('#mybtn').click(function () {
    $('#mydiv').append($("#myOtherDiv").html());
});

Something like this: 1. Place all html to add into a new div named addingtext:

  <div name="addingtext">
     <div class="container">
        <div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
        <div class="panel-heading">Random1 - Random2</div>
        <div class="panel-body">
            <div>Random3</div>
       </div>
     </div>
    </div>
  </div>

2. get all inner HTML (source) of your div named addingtext:

 var stringtoadd = document.getElementsByName("addingtext").innerHTML;

Then

 $('#mydiv').append(stringtoadd);

If you know angular.js you could create a separate html file for the text you want to add/replace and instead of replacing all the text through javascript you could just create <div ng-include="'html-with-text.html'"></div> with javascript.

There are many ways to do it (all the answers provided here works fine). But you need to choose an effective method to do it. I'm still learning the JS. So I really can't help you in choosing an effective method. But you can try this method too.

Instead of append(), you can also use load() (reference to the load() api)

Main HTML code:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>button</button>
<div id="myDiv">mydiv</div>
<div id = "addHere"> </div>

HTML of what you want to add (Suppose the title of this HTML is addon.html):-

<div class="container">
    <div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
    <div class="panel-heading">Random1 - Random2</div>
    <div class="panel-body">
        <div>Random3</div>
   </div>
 </div>
</div>

Finally, your JS

$('#mybtn').click(function () {
    $('#addHere').load('/addon.html');
});

This will place your addon HTML right after your div.