Jq dynamically creates tag elements

    -sharpbbox{
        position: absolute;
        top: 166px;
        left: 219px;
        background: -sharpfff;
        width: 548px;
        border: 1px solid -sharp999;
    }
    -sharpbbox -sharpseach-ul{
        list-style: none;
    }
    -sharpbbox -sharpseach-ul li{
        height: 50px;
        line-height: 30px;
        padding-left: 10px;
    }
    -sharpbbox -sharpseach-ul li:hover{
        background: -sharpe5e5e5;
        text-decoration: underline;
    }
    //body
    <div id="bbox" style="display: none;">
        <ul id="seach-ul">
        </ul>
    </div>
    //script
    $("-sharptxt").on("keyup", function (e) {
        var text = $("-sharptxt").val();
        var html = "";
        html += "<li>" + text + "</li>"
        $("-sharpseach-ul").html(html);
        $("-sharpbbox").show();

    });
    

Why is the previously set style missing after dynamically adding li


The

style is all there, and there is nothing wrong with your code.

check to see if the style does not work, or if it is not introduced correctly

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
         -sharpbbox{
        position: absolute;
        top: 166px;
        left: 219px;
        background: -sharpfff;
        width: 548px;
        border: 1px solid -sharp999;
    }
    -sharpbbox -sharpseach-ul{
        list-style: none;
    }
    -sharpbbox -sharpseach-ul li{
        height: 50px;
        line-height: 30px;
        padding-left: 10px;
    }
    -sharpbbox -sharpseach-ul li:hover{
        background: -sharpe5e5e5;
        text-decoration: underline;
    }
    </style>
</head>
<body>
<div id="bbox" style="display: none;">
        <ul id="seach-ul">
        </ul>
    </div>

    <input type="text" id="txt" name="">
    
    <script type="text/javascript">
         $('-sharptxt').on('keyup', function (e) {
        var text = $('-sharptxt').val();
        var html = '';
        html += '<li>' + text + '</li>'
        $('-sharpseach-ul').html(html);
        $('-sharpbbox').show();

    });
    </script>
</body>
</html>

The

style is in effect. Test address .
emmmm there is another situation where you use packaged form. Call in the css. There may be other logos. For example, the css module of vue .

clipboard.png


code snippet can run, no problem. Is there another style that overrides the style?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1be1f32-315b6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1be1f32-315b6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?