1

Hola el problema que tengo es el siguiente tengo un script de tipo "text/html" presentado a continuacion

<script type="text/html" id="rowPresupuesto">
<div class="row-with-scroll-horizontal" id="{id_budget}">
    <div class="autocomplete p-0 col-3" style="display: block;">
        <input class="form-control form-control-sm" id="{name_development}" title="Desarrollo o ubicación">
        <div id="{items_development}" class="autocomplete-items"></div>
    </div>
    <div class="autocomplete col-3 p-0">
        <input class="form-control form-control-sm name-insumos" id="{name_input}" title="Insumos">
        <div id="{items_input}" class="autocomplete-items"></div>
    </div>
    <input class="form-control form-control-sm col-sm-2 col-2 col-md-1 m-0 month" title="Monto mensual">
    <div class="btn-group" id="action-group-script" role="group">
        <button type="button" class="btn btn-sm mb-1 btn-danger delete" title="Eliminar"><i class="far fa-trash-alt"></i></button>
        <button type="button" class="btn btn-sm mb-1 btn-success save" title="Crear nuevo"><i class="far fa-save"></i></button>
    </div>
</div>

me interesa agregar más inputs de manera dinámica, los inputs que me interesa agregar es como el siguiente

<input class="form-control form-control-sm col-sm-2 col-2 col-md-1 m-0 month" title="Monto mensual">

me pregunta es ¿se puede manipular este script como si se fuera parte del DOM?

lo he tratado de hacer de la siguiente manera pero aún no funciona

for (let i = 1; i<=weekOfYear; i++){

    $("#name-weeks").append("<div class='col-sm-2 col-2 col-md-1 p-1'>Sem - "+i+"</div>");

    $($("<input class='form-control form-control-sm col-sm-2 col-2 col-md-1 m-0 month' title='Monto mensual'>"))
        .insertBefore("#action-group-script");
}
2
  • Que libreria estas utilizando para los templates?
    – Einer
    el 6 dic. 2018 a las 14:53
  • No estoy utilizando ninguna librería el 6 dic. 2018 a las 15:05

1 respuesta 1

1

El contenido dentro de una etiqueta script no se reconoce como un HTML por lo que no append() no te funcionara.

Intenta conviertiendo el contenido dentro del script a HTML:

var contenido =  $($("#rowPresupuesto").text());

Luego agregas el elemento que deseas:

for (let i = 1; i<=weekOfYear; i++){

    $("#name-weeks").append("<div class='col-sm-2 col-2 col-md-1 p-1'>Sem - "+i+"</div>");

     contenido.find("#action-group-script")
        .append($("<input class='form-control form-control-sm col-sm-2 col-2 col-md-1 m-0 month' title='Monto mensual'>"));
}

Y luego actualizas el contenido de la etiqueta script:

$("#rowPresupuesto").text(contenido.html());

Ejemplo:

$("button").click(function(){
  var contenido = $($("#rowPresupuesto").text());
  
  contenido.find("#action-group-script").append("<button>NUEVO CONTENIDO</button>");
  
  $("#rowPresupuesto").text(contenido.html());
  
  console.log("Nuevo contenido dentro de la etiqueta script");
  
  console.log($("#rowPresupuesto").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Agregar</button>
<script type="text/html" id="rowPresupuesto">
  <div class="row-with-scroll-horizontal" id="{id_budget}">
      <div class="autocomplete p-0 col-3" style="display: block;">
          <input class="form-control form-control-sm" id="{name_development}" title="Desarrollo o ubicación">
          <div id="{items_development}" class="autocomplete-items"></div>
      </div>
      <div class="autocomplete col-3 p-0">
          <input class="form-control form-control-sm name-insumos" id="{name_input}" title="Insumos">
          <div id="{items_input}" class="autocomplete-items"></div>
      </div>
      <input class="form-control form-control-sm col-sm-2 col-2 col-md-1 m-0 month" title="Monto mensual">
      <div class="btn-group" id="action-group-script" role="group">
          <button type="button" class="btn btn-sm mb-1 btn-danger delete" title="Eliminar"><i class="far fa-trash-alt"></i></button>
          <button type="button" class="btn btn-sm mb-1 btn-success save" title="Crear nuevo"><i class="far fa-save"></i></button>
      </div>
  </div>
</script>

Si notas al final veras el boton que se agrego en el script.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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