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
    Commented el 6 dic. 2018 a las 14:53
  • No estoy utilizando ninguna librería Commented 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

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

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