jQuery-屏幕宽度低于500px时添加元素

我想在屏幕宽度低于500px时向主体添加一个元素。我使用了下面的代码，但是元素没有出现。希望有人能帮我

$(window).resize(function(){
if ($(window).width() <= 500){  
  $("body").append("<a href="#">Home</a>");
} });

$（窗口）。调整大小（函数（）{
if（$（窗口）.width（）
jQuery：

$(window).resize(function(){
    if ($(window).width() <= 500) {  
        $('.hidden-link').show();
    } else {
        $('.hidden-link').hide();
    }
});

包含HTML代码的字符串中存在语法错误。如果使用撇号分隔字符串，则可以在字符串中使用引号而不转义它们

使用变量跟踪是否已添加元素。将检查大小的代码放入函数中，这样您可以将其用作事件处理程序，但也可以从一开始直接调用它，以检查窗口是否足够小

$(function(){

    var added = false; // keep track of whether the element is added

    function checkSize() {
        if (!added && $(window).width() <= 500) {
            $("body").append('<a href="#">Home</a>');
            added = true;
        }
    }

    $(window).resize(checkSize);

    checkSize(); // check from the start

});

$（函数（）{
var added=false；//跟踪是否添加了元素
函数checkSize（）{
如果（！added&&$（window）.width（）检查控制台并注意引号。
“”
？？为什么不直接使用CSS和媒体查询？一旦修复了语法错误，您将发现可能会添加数百个这些元素，因为在窗口足够小的每个调整大小事件上都会添加一个。在添加之前，您需要确保它不在那里。
"<a href=\"#\">Home</a>"

"<a href='#'>Home</a>"

'<a href=\'#\'>Home</a>'

'<a href="#">Home</a>'

<!--- everything else in the Body -->
<a class="hidden-link" href="#">Home</a>

.hidden-link {
    display: none;
}

$(window).resize(function(){
    if ($(window).width() <= 500) {  
        $('.hidden-link').show();
    } else {
        $('.hidden-link').hide();
    }
});

.hidden-link {
    display: none;
} 

@media only screen 
and (max-width : 500px) {

    .hidden-link {
        display: inline;
    }

}

$(function(){

    var added = false; // keep track of whether the element is added

    function checkSize() {
        if (!added && $(window).width() <= 500) {
            $("body").append('<a href="#">Home</a>');
            added = true;
        }
    }

    $(window).resize(checkSize);

    checkSize(); // check from the start

});