Skip to main content
se añadieron 3951 caracteres en el cuerpo
Origen Enlace

Código JavascriptAjusto la pregunta agregando el código: $('.botoneraMain > .k-menu-scroll-wrapper').prepend('');
$('.botoneraMain > .k-menu-scroll-wrapper').prepend('');

$('.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í

Código Javascript: $('.botoneraMain > .k-menu-scroll-wrapper').prepend('');
$('.botoneraMain > .k-menu-scroll-wrapper').prepend('');

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í

Origen Enlace

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

Código Javascript: $('.botoneraMain > .k-menu-scroll-wrapper').prepend('');
$('.botoneraMain > .k-menu-scroll-wrapper').prepend('');