javascript - 获取对附加项目的引用并将一些其他项目附加到先前附加的项目

Question

理论:

这是分类网站，分类网站中的每个帖子都有聊天图标，如果用户单击此按钮，将打开一个新的聊天框

<div class="box" ><div class="had-container">hi welcom</div></div> //chatbox

实际上聊天框被附加到

<div id="insert"></div>

聊天框打开后，我将检查用户是否已登录，如果用户未登录，我想附加

<div class="loggedin">You are not logged in</div>

到聊天框

1.对于每个帖子都会有一个聊天图标，用户可以单击所有帖子上的聊天图标，因此使用 id 或 class 将不起作用我需要对附加项目的引用。

2.我可以使用if和else。但我想尝试一下。

脚本:-

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
    $(function(){
      var item=$("#insert");
      var newBox = '<div class="box" ><div class="had-container">hi welcome</div></div>';
      $("#clickhere").on("click", function(){
        item.append(newBox);
        if(usernotloggedin){
      // problem is here I don't know how to get the previously appended item's reference.          
        }
      })
    });


    </script>

    <div id="insert"></div> 

    <div id="clickhere">clicktoappend</div> //if you click once on this

示例:-

    <div id="clickhere">clicktoappend</div> 

如果您点击此按钮一次

<div id="insert"></div> 

变成了

<div id="insert"><div class="box" ><div class="had-container">hi welcome</div></div></div>

现在我想在附加项目中附加一些元素。 (我需要某种对附加项目的引用，以便之后可以对其进行操作。)

现在，如果用户未登录，我想附加以下内容

<div class="loggedin">You are logged in</div> 

到附加项目。所以就变成了

    <div id="insert"><div class="box" ><div class="had-container">hi welcome</div><div class="loggedin">You are not logged in</div></div></div>

提前致谢

Answer 1

for example var ref=item.append(newBox); if ref works as a reference it will be good. –

既然您提到了这一点，您就可以轻松做到这一点。

var ref=item.append(newBox).find('.box');

现在你的ref将有<div class="box" >...</div>在其中作为 Jquery DOM 对象