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

Cpkeywords2 javascript -jquery front-end-engineer

Jun.11,2021

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 .

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

Previous: The style written by react+redux to a component is only introduced separately in this component, so why do other components share the styles in this style file?

Next: Hue does not display internal tables on the hue page when connecting to hive