如何使用 jQuery 单击一个段落并添加另一个段落？

在本文中，我们将学习如何在使用 jQuery 单击段落时向文档添加另一个段落。

方法：我们将使用 jQuery 的delegate()和after()方法。 delegate()方法用于向给定元素添加事件侦听器。这将用于向段落元素添加单击事件侦听器。这种方法 接受三个参数，在我们的例子中，子选择器是段落元素，事件是“点击”，函数是匿名函数。

匿名回调函数用于向文档添加新段落。这是使用after()方法完成的，该方法在文档中的选定元素之后插入给定元素。我们将使用this绑定作为选择器，在当前元素之后插入一个新的段落元素。因此，这将在单击后的文档中添加一个段落元素。我们还可以添加一个计数器变量来查看效果。

句法：

$(selector).delegate("target_elem", function() {
   $(this).after("content");
})

下面的示例演示了这种方法。

例子：

HTML

  
    p {
      background: green;
      color: white;
      padding: 5px;
    }
  
  
  
  
  
    


  
    GeeksforGeeks 
  
  
    Click on the paragraphs to start
    adding new paragraphs
  
  
  
  
    // A count variable to keep track
    // of the current paragraph 
    let cnt = 0;
  
    // Add the click event listener to
    // the required paragraph element
    $("body").delegate("p", "click", 
                       function() {
  
      // Insert a new paragraph after
      // this paragraph
      $(this).after(
        "<p>New paragraph " +
        cnt + "</p>
        ");
        
      cnt++;
    });
  

输出：