1

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.

2 respuestas 2

3

Uso de plantillas

Ampliando un poco la publicación de @phpMyGuel también se podría utilizar plantillas como alternativa para simplificar un poco el trabajo.

Por ejemplo, partiendo de una estructura HTML como la que sigue a continuación:

<template id="plantilla">
  <!-- El código HTML acá no se mostrará en la página -->
  ...
</template>

Tal y como se define en <template> - HTML | MDN, es el contenido que no se renderiza cuando se carga la página, pero que puede ser instanciado con JavaScript durante el tiempo de ejecución.

Esto quiere decir que lo puedes mostrar cuando quieras al usuario utilizando JavaScript:

Por ejemplo:

elementoHTML.append( plantilla.content );

Donde elementoHTML es el elemento HTML y append es el método que permite ingresar el contenido de la plantilla en él. Mientras que en plantilla.content, plantilla es la plantilla y content todo su contenido.

Ejecutemos un ejemplo

Entendiendo la explicación anterior en esta publicación ejecutemos un ejemplo tomando en cuenta el nombre de la función que has definido en la pregunta:

const targetDiv = document.getElementById("content");

// Función basada en el ejemplo de la pregunta:
const populateData = (idType) => {
  if (typeof idType !== "string")
    return;

  switch (idType) {
    case "Profile":
      targetDiv.append(plantilla.content);
      break;

    default:
      console.log(`Lo lamentamos, por el momento no disponemos de ${idType}`);
      break;
  }
};

mostrar.onclick = () => {
  populateData("Profile");
};
<!-- Plantilla, esto no se renderiza durante
     la carga de la página -->
<template id="plantilla">
  <h2>Contenido de ejemplo</h2>
  <p>Este es un contenido de ejemplo de la plantilla-</p>
</template>

<button id="mostrar">Mostrar contenido de la plantilla</button>

<!-- Área donde se mostrará el contenido de la plantilla -->
<div id="content"></div>

Nota: para el ejemplo anterior, se incorpora un botón para que se pueda realizar la prueba sin que se cargue de forma automática el contenido de la plantilla.

El objetivo es darle oportunidad al usuario de interactuar y ver los resultados.

No olvides leer los comentarios puestos en el código.

2
  • 1
    Justo a esto me referia, es una muy buena idea puedo poner el div platinlla donde tengo el <a> voy a probar si me funciona, pero la idea es lo que buscaba el 5 jul. 2020 a las 14:56
  • 1
    Ya lo he implementado a mi código y me funciona a la perfección, voy a trastear a ver que mas puedo hacer, gracias por la ayuda. el 6 jul. 2020 a las 7:50
2

El salto de línea en JS, como en muchos otros lenguajes, rompe la cadena del literal.

Para solventar esta situación tienes múltiples maneras de hacerlo.

Concatenación:

A través del operador + podemos concatenar en un solo string el contenido de múltiples.

let html =  '<p>Parrafo 1</p>' +
            '<p>Parrafo 2</p>' +
            '<p>Parrafo 3</p>';
            
contenido.innerHTML = html;
<div id="contenido">

</div>

Variable acumulativa

El operador += nos permite añadir a la cadena más contenido, al final del todo de lo que ya tuviese.

let html = '';
html += '<p>Parrafo 1</p>';
html += '<p>Parrafo 2</p>';
html += '<p>Parrafo 3</p>';
            
contenido.innerHTML = html;
<div id="contenido">

</div>

Plantillas de cadena de texto

Esta manera es especialmente cómoda, ya que nos permite copiar directamente un bloque HTML para insertarlo dentro de una variable con tan solo envolverlo con las comillas inclinadas.

let html =  `<p>Parrafo 1</p>
             <p>Parrafo 2</p>
             <p>Parrafo 3</p>`;
            
contenido.innerHTML = html;
<div id="contenido">

</div>

Plantillas de cadena de texto con variables

Una de las ventajas de usar plantillas de cadena de texto es que nos permiten extraer el valor de las variables que incluyamos dentro.

let nombre1 = 'Pepe', nombre2 = 'Maria', nombre3 = 'Pedro';
let html =  `<p>${nombre1}</p>
             <p>${nombre2}</p>
             <p>${nombre3}</p>`;
            
contenido.innerHTML = html;
<div id="contenido">

</div>

Referencia: Plantillas de cadena de texto

3
  • Entiendo el concepto, pero tengo demasiado código como para ponerlo asi, no hay alguna otra forma de englobarlo todo el 3 jul. 2020 a las 9:03
  • No creo que exista ninguna manera de hacerlo sin tener que tocar la manera en la que tienes construidas tus cadenas HTML. No obstante, si te habías planteado el uso de dobles comillas en vez de las simples e incluso lo habías probado, supone mucho menos esfuerzo el uso de las las las comillas inclinadas, ya que no tendrías que transformar todas las comillas dobles en simples que tienes actualmente dentro de tu cadena (como tendrías que hacer en caso de usar las dobles para contener la cadena).
    – phpMyGuel
    el 3 jul. 2020 a las 9:17
  • Hola @phpMyGuel, amplié un poco lo que has publicado acá respecto al uso de las plantillas. Sin embargo, valió la pena marcar esta publicación como útil por ser bastante ilustrativa. el 4 jul. 2020 a las 6:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.