El código sería el siguiente:
<script>
var targetDiv = document.getElementById('content');
var htmlContent = '';
function populateData(idTipe){
switch(idTipe){
case 'Profile':{
htmlContent = '<template> <hr>
<div class="container bootstrap snippet">
<div class="row">
<div class="col-sm-10"><h1>User name</h1></div>
<div class="col-sm-2"><a href="/users" class="pull-right"><img title="profile image" class="img-circle img-responsive" src="http://www.gravatar.com/avatar/28fd20ccec6865e2d5f0e1f4446eb7bf?s=100"></a></div>
</div>
<div class="row">
<div class="col-sm-3"><!--left col-->
<div class="text-center">
<img src="http://ssl.gstatic.com/accounts/ui/avatar_2x.png" class="avatar img-circle img-thumbnail" alt="avatar">
<h6>Upload a different photo...</h6>
<input type="file" class="text-center center-block file-upload">
</div></hr><br>
<div class="panel panel-default">
<div class="panel-heading">Website <i class="fa fa-link fa-1x"></i></div>
<div class="panel-body"><a href="http://bootnipets.com">bootnipets.com</a></div>
</div>
<ul class="list-group">
<li class="list-group-item text-muted">Activity <i class="fa fa-dashboard fa-1x"></i></li>
<li class="list-group-item text-right"><span class="pull-left"><strong>Shares</strong></span> 125</li>
<li class="list-group-item text-right"><span class="pull-left"><strong>Likes</strong></span> 13</li>
<li class="list-group-item text-right"><span class="pull-left"><strong>Posts</strong></span> 37</li>
<li class="list-group-item text-right"><span class="pull-left"><strong>Followers</strong></span> 78</li>
</ul>
<div class="panel panel-default">
<div class="panel-heading">Social Media</div>
<div class="panel-body">
<i class="fa fa-facebook fa-2x"></i> <i class="fa fa-github fa-2x"></i> <i class="fa fa-twitter fa-2x"></i> <i class="fa fa-pinterest fa-2x"></i> <i class="fa fa-google-plus fa-2x"></i>
</div>
</div>
</div><!--/col-3-->
<div class="col-sm-9">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#messages">Menu 1</a></li>
<li><a data-toggle="tab" href="#settings">Menu 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<hr>
<form class="form" action="##" method="post" id="registrationForm">
<div class="form-group">
<div class="col-xs-6">
<label for="first_name"><h4>First name</h4></label>
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="first name" title="enter your first name if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="last_name"><h4>Last name</h4></label>
<input type="text" class="form-control" name="last_name" id="last_name" placeholder="last name" title="enter your last name if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="phone"><h4>Phone</h4></label>
<input type="text" class="form-control" name="phone" id="phone" placeholder="enter phone" title="enter your phone number if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="mobile"><h4>Mobile</h4></label>
<input type="text" class="form-control" name="mobile" id="mobile" placeholder="enter mobile number" title="enter your mobile number if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Email</h4></label>
<input type="email" class="form-control" name="email" id="email" placeholder="[email protected]" title="enter your email.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Location</h4></label>
<input type="email" class="form-control" id="location" placeholder="somewhere" title="enter a location">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="password"><h4>Password</h4></label>
<input type="password" class="form-control" name="password" id="password" placeholder="password" title="enter your password.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="password2"><h4>Verify</h4></label>
<input type="password" class="form-control" name="password2" id="password2" placeholder="password2" title="enter your password2.">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<br>
<button class="btn btn-lg btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Save</button>
<button class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i> Reset</button>
</div>
</div>
</form>
<hr>
</div><!--/tab-pane-->
<div class="tab-pane" id="messages">
<h2></h2>
<hr>
<form class="form" action="##" method="post" id="registrationForm">
<div class="form-group">
<div class="col-xs-6">
<label for="first_name"><h4>First name</h4></label>
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="first name" title="enter your first name if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="last_name"><h4>Last name</h4></label>
<input type="text" class="form-control" name="last_name" id="last_name" placeholder="last name" title="enter your last name if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="phone"><h4>Phone</h4></label>
<input type="text" class="form-control" name="phone" id="phone" placeholder="enter phone" title="enter your phone number if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="mobile"><h4>Mobile</h4></label>
<input type="text" class="form-control" name="mobile" id="mobile" placeholder="enter mobile number" title="enter your mobile number if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Email</h4></label>
<input type="email" class="form-control" name="email" id="email" placeholder="[email protected]" title="enter your email.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Location</h4></label>
<input type="email" class="form-control" id="location" placeholder="somewhere" title="enter a location">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="password"><h4>Password</h4></label>
<input type="password" class="form-control" name="password" id="password" placeholder="password" title="enter your password.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="password2"><h4>Verify</h4></label>
<input type="password" class="form-control" name="password2" id="password2" placeholder="password2" title="enter your password2.">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<br>
<button class="btn btn-lg btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Save</button>
<button class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i> Reset</button>
</div>
</div>
</form>
</div><!--/tab-pane-->
<div class="tab-pane" id="settings">
<hr>
<form class="form" action="##" method="post" id="registrationForm">
<div class="form-group">
<div class="col-xs-6">
<label for="first_name"><h4>First name</h4></label>
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="first name" title="enter your first name if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="last_name"><h4>Last name</h4></label>
<input type="text" class="form-control" name="last_name" id="last_name" placeholder="last name" title="enter your last name if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="phone"><h4>Phone</h4></label>
<input type="text" class="form-control" name="phone" id="phone" placeholder="enter phone" title="enter your phone number if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="mobile"><h4>Mobile</h4></label>
<input type="text" class="form-control" name="mobile" id="mobile" placeholder="enter mobile number" title="enter your mobile number if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Email</h4></label>
<input type="email" class="form-control" name="email" id="email" placeholder="[email protected]" title="enter your email.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Location</h4></label>
<input type="email" class="form-control" id="location" placeholder="somewhere" title="enter a location">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="password"><h4>Password</h4></label>
<input type="password" class="form-control" name="password" id="password" placeholder="password" title="enter your password.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="password2"><h4>Verify</h4></label>
<input type="password" class="form-control" name="password2" id="password2" placeholder="password2" title="enter your password2.">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<br>
<button class="btn btn-lg btn-success pull-right" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Save</button>
<!--<button class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i> Reset</button>-->
</div>
</div>
</form>
</div>
</div><!--/tab-pane-->
</div><!--/tab-content-->
</div><!--/col-9-->
</div><!--/row-->
</template> ';
break;
}
default:
console.log('Lo lamentamos, por el momento no disponemos de ' + idTipe + '.');
break;
}
targetDiv.innerHTML = htmlContent;
}
</script>
El problema que tengo no es el código html, es que el script no me lo lee bien seguramente por el uso de las comillas en la variable htmlcontent, pero no encuentro la solución. Lo que necesito es que la variable me almacene todo ese código html para ejecutarlo cuando me sea necesario. El js me funciona correctamente con texto he imágenes si lo escribo en una sola linea, pero cuando el código es mas largo no me funciona y no se porque. Ya he probado a poner comillas dobles para que lea bien los saltos de lineas y tampoco funciona.