Jquery change html after select box changes

Question

i have the following jquery, when an option is selected some HTML will be added or another one based on an if else statement, that works right, the problem is that once one option is selected, if i go back and change that option, the HTML added will not change, but if i add an alert, the alert do change based on the value name of the option box, so i dont understand exactly why it doesnt change the html based on the change() jquery function.

here is the code

$("select").change(function() {

 option = $("#opcion").val();

if(option == "celulares") {
$(".insert").replaceWith( " <div class='row' id='option2'> <div      class='col-xs-6'>Por favor ingrese el costo de cada celular en dolares: </div><div class='col-xs-6'><form class='form-inline'><div class='form-group'><label class='sr-only' for='exampleInputAmount'>Amount (in dollars)</label><div class='input-group'><div class='input-group-addon'>$</div><input type='text' class='form-control' id='costoproducto' placeholder='Monto'><div class='input-group-addon'>.00</div></div></div><div id='validacioncosto'></div></form></div></div><hr> " + 
  "<div class='row' id='option6'><div class='col-xs-6' id='resultado'></div><div class='col-xs-6'><button type='button' id='calculo' class='btn btn-warning'>Calcular</button></div></div><div class='row' id='result'></div> "); 

} else if(option == "electronica" || option == "juguetes" || option == "repuestos" || option == "otro") {
$(".insert").replaceWith(option);
alert(option);
}
});

and the HTML

 <option></option>                   
 <option value="celulares">Celulares</option>
 <option value="electronica">Electronica</option>
 <option value="juguetes">Juguetes</option>
 <option value="repuestos">Repuestos</option>
 <option value="otro">Otro</option>

</select>
            </div>
        </div>
    </div>

    <hr>
    <div class="insert">
        <p>hola</p>
    </div>

any hints?

Answer 1

使用$(".insert").html()而不是$(".insert").replace()可能会更好，因此您只需切换div的胆量即可。

Answer 2

replaceWith function replaces the element by the new HTML. So after then, you won't be able to select it anymore because the HTML you used doesn't have the insert class. I presume you wanted to the function html like this :

$(".insert").html( YOUR_HTML);