Skip to main content
2 de 2
se añadieron 3951 caracteres en el cuerpo

Duplicados al hacer prepend en javascript

soy nuevo en el tema de Javascript, resulta que estoy agregando dos etiquetas html (label, input) a mi html por Javascript utilizando prepend, para la utilización de un menú responsive, el problema surge que cuando hago click en el icono del menú y me muestra los items de Menu y al hacer click en uno de estos enlaces, se direcciona a dicho enlance, pero el problema es que cuando direcciona, se duplica el (label y el input) del icono del menú responsive y se sigue generando un nuevo input y label cada vez que hago click en los enlaces. Alguno me puede hacer el favor de ayudarme con una solución para que no se duplique los elementos (label e input)? Por razones de seguridad, no puedo mostrar todo el código, pero mostraré el código javascript que utilicé para generar el input y el label en el html. Muchas gracias

Ajusto la pregunta agregando el código:

$('.botoneraMain > .k-menu-scroll-wrapper').prepend('<label for="check" class="checkbtn"><i class="fa fa-bars"></i></label>');                  
$('.botoneraMain > .k-menu-scroll-wrapper').prepend('<input type="checkbox" id="check">');
.wrap-menu-extended {
    width: 100%;
}
.checkbtn {
    font-size: 25px !important;
    color: white;
    float: right;
    line-height: 40px !important;
    margin-left: -30px;
    margin-right: 18px;
    cursor: pointer;
    display: none;
    background-color: #92b711;
    padding: 0rem 0.8rem;
    border-radius: 4px;
}
#check{
  display: none;
}
@media (max-width: 952px){
  .cabeceraMain .k-menu-horizontal li span{
    font-size: 16px;
  }
}
@media (max-width: 952px){
  .k-menu-scroll-wrapper{
    width: 100% !important;
  }
}
@media (max-width: 952px){
  .k-menu-scroll-button{
    display: none !important;
  }
}
@media (max-width: 952px){
  .loginMain{
    margin-right: 18px;
  }
}
@media (max-width: 952px){
  .logoMain .header-logo{
    margin-top: 0;
    margin-left: -88px;
  }
}
@media (min-width: 952px){
  .k-menu-scroll-wrapper{
    width: 100% !important;
    margin-left: 116px;
  }
}
@media (max-width: 575.98px){
.checkbtn {
    margin-right: 5px !important;
}
}
@media (max-width: 858px){
  .checkbtn{
    display: block;
    float: right;
    margin-right: -102px;
  }
  .k-menu-horizontal{
    display: block;
    position: fixed;
    width: 100%;
    height: auto;
    background: #2c3e50;
    top: -80px;
    left: 0;
    text-align: center;
    transition: all .5s;
  }
  .cabeceraMain .k-menu-horizontal li{
    display: block;
    margin: 14px 0 !important;
    line-height: 30px;
    margin-right: 20px;
  }
  .cabeceraMain .k-menu-horizontal li span{
    font-size: 20px;
    justify-content: center;
  }
#check:checked ~ .k-menu-horizontal {
    display: block;
    width: 100% !important;
    max-height: 50%;
    margin-top: 0px;
    top: 80px;
    left: 0px !important;
    background-color: #fffcfa;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/prueba.css" charset="UTF-8" type="text/css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="./js/prueba.js"></script>
    <div class="botoneraMain" id="divMenuContent">
    <div class="k-menu-scroll-wrapper horizontal" style="width: 204px;">
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <i class="fa fa-bars"></i>
        </label>
        <ul id="menu" data-role="menu" class="k-widget k-reset k-menu k-menu-horizontal" aria-orientation="horizontal" tabindex="0" role="menubar" style="width: 204px;">
            <li>
                <span class="k-link k-menu-link">Uno</span>
            </li>
            <li>
                <span class="k-link k-menu-link">Dos</span>
            </li>
            <li>
                <span class="k-link k-menu-link">Tres</span>
            </li>
        </ul>
    </div>
    </div>

</body>
</html>

introducir la descripción de la imagen aquí