Tengo un formulario dentro de un template, y estoy intentando agregarle un botón que añada otro input SIN su correspondiente label:
addPower(el) {
var temPower = document.querySelector("#temp-power").innerHTML;
let power = document.createElement("div");
power.innerHTML = temPower;
el.querySelector(".container-power").appendChild(power);
power.querySelectorAll(".lbl-tmp-crd").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
power.querySelectorAll("input[name=t_power]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
power.querySelectorAll("input[name=v_power]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
return power;
}
Que corresponde a este front-end
<template id="temp-power">
<div class="box-power" >
<label class="lbl-tmp-crd" contenteditable='true'>PRECIOS POR POTENCIA</label>
<div id="tmp-pow">
<input type="text" name="t_power" style="width:40px"/>
<input type="text" name="v_power"/>
</div>
</div>
</template>
Lo que he intentado es, poner en el div con id tmp-pow el querySelector, pero no me deja. No obtiene ningún valor y se rompe el programa.
Y no puedo cambiar la template, porque todo el programa responde sobre ella...