在包装div后正确插入div

所以正如标题所示，我试图在我的包装div后插入'cookie'警告。我已经使用追加和尝试，但一切在结束的div cookiebar在包装div后正确插入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>

我剩下的就是执行这样的div ID包装大量的代码，然后后添加代码只是最重要的位代码cuz有它的负载

更新：我已经添加了我用来创建cookie和隐藏酒吧的功能，我已经尝试了迄今为止的所有建议，并且cookiebar div土地旁边包装作为兄弟姐妹如此

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

，我想它是作为第一个孩子在包装

来源

2015-08-19 Higeath

难道你尝试'（'＃wrapper'）。after（cookiehtml）;'?? – joyBlanks

如果你想要在'＃wrapper'之后插入你的cookie代码，这应该可以工作：'$（'＃wrapper'）。after（cookiehtml）;'为什么要使用'：first-child'？ – blex

我应该提到cookiehtml应该是包装的第一个孩子，现在只使用$（'＃wrapper'）。（cookiehtml）;它在兄弟姐妹层面 – Higeath

首先，我不知道你使用: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/

来源

2015-08-19 19:11:27

最后一点是我想要的prepend谢谢你生病检查这个答案在5分钟 – Higeath

@Higeath谢谢我欣赏，如果你接受:) –

如果你想cookiehtml是第一要素内的wrapper div中，jQuery的你可以使用prepend：

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

这将使HTML DOM看起来像：

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

来源

2015-08-19 19:14:18

这是正确的答案感谢，但上面的人更快：P – Higeath

回答

相关问题