Question

因为标题说我试图插入cookie＆＃39;在我的包装div之后发出警告。我也试过使用append，但是在执行其他所有操作后添加了代码，所以div id包装了大量的代码然后在最后的cookiebar div

var cname = "consentCookie";
var cvalue = "on";
var exdays = "20";
var cookiehtml = '\
    <div id="cookiebar">\
    We use cookies to track usage and preferences. \
    <a href="#" id="enablecookies" onclick="setCookie();">I Understand.</a>\
    </div>';
    function setCookie() {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
    $('#cookiebar').hide();
}
function getCookie() {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

$(document).ready(function(){
    if(getCookie() == ''){
        $('#wrapper:first-child').after(cookiehtml);
    }
    else if(getCookie() == 'on'){
        $('#cookiebar').hide();
    }

  });

和HTML

<html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <link rel="icon" type="image/ico" href="assets/logo/logo.ico">

                    <link rel="stylesheet" style="text/css" href="../cookiebar/cookiebar.css">


                <link rel="stylesheet" style="text/css" href="css/styles.css">
                <link rel="stylesheet" style="text/css" href="css/fonts.css">
                <link rel="stylesheet" style="text/css" href="css/navigation_bar.css">
                <link rel="stylesheet" type="text/css" href="css/lato_font.css">

                <script src="js/jquery.min.js"></script>
                <script src="../cookiebar/cookiebar.js"></script>
                <script src="js/jquery.color-RGBa-patch.js"></script>
                <script src="js/navigation_bar.js"></script>

                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta name="description" content="League of Legends patch notes in a minimalistic and modern way.">
                <meta name="keywords" content="league, of, league notes,legends, patch, notes, leaguenotes,Patch '.$Patch_No.' ">
                <meta name="author" content="Kacper Turon">
                <title>LeagueNotes - '.$Patch_No.'</title>
            </head>
            <body>
            <div id="wrapper"></div>

我只留下了最重要的代码，因为它有很多代码

更新：我已添加了用于创建Cookie并隐藏栏的功能，到目前为止我已尝试过每个建议，并且cookiebar div作为兄弟姐妹在包装器旁边着陆所以

<div id="wrapper">
</div>
<div id="cookiebar">
</div>

我希望它成为包装中的第一个孩子

Answer 1

首先，我不确定您是否按预期使用:first-child。您应该只使用:first或:eq(0)。

但即使如此，您可能还想使用insertAfter()而不是after()。

$(document).ready(function(){
    if(getCookie() == ''){
        $('#wrapper:first-child').after(cookiehtml);
    }
    ...

因此

应该是：

$(document).ready(function(){
    if(getCookie() == ''){
        $(cookiehtml).insertAfter( '#wrapper');
    }
...

http://jsfiddle.net/grh1w80q/1/

或者，如果您更喜欢将cookiehtml作为父#wrapper的第一个节点，请使用prependTo()：

$(document).ready(function(){
    if(getCookie() == ''){
        $(cookiehtml).prependTo( '#wrapper');
    }
...

http://jsfiddle.net/grh1w80q/2/

Answer 2

如果您希望cookiehtml成为第一个内部 wrapper div，则在jQuery中您可以使用prepend：

if(getCookie() == ''){ $('#wrapper').prepend(cookiehtml); }

这会使HTML DOM看起来像：

<div id="wrapper"> <div id="cookiebar"> ... </div> ... </div>

在包装div

2 个答案: