如何单击标题以在 jQuery 中添加另一个标题？

在开发 Web 应用程序时，经常需要在用户单击某个元素时动态地添加内容。本篇介绍如何在 jQuery 中，通过单击一个标题，添加另一个标题。

HTML 基础结构

我们有一个简单的 HTML 结构，其中包含一个标题列表和一个空的标题区域。

<h2>我的标题列表</h2>
<ul>
  <li><a href="#">标题1</a></li>
  <li><a href="#">标题2</a></li>
  <li><a href="#">标题3</a></li>
</ul>

<div id="title-area"></div>

在 jQuery 中添加单击事件

我们首先需要添加一个 jQuery 单击事件，当用户单击标题时，触发此事件。

$(document).ready(function() {
  $('ul li a').click(function() {
    // 在此处添加代码
  });
});

在上面的代码中，我们使用 jQuery 选择器选中所有 li 元素下的 a 元素，并添加单击事件。当用户单击 a 元素时，会触发此事件。

在空白区域添加标题

现在，我们需要在空白的标题区域中添加标题。我们将使用 jQuery 的 .html() 方法来实现此目的。

$(document).ready(function() {
  $('ul li a').click(function() {
    var title = $(this).html();
    $('#title-area').html('<h2>' + title + '</h2>');
  });
});

在上面的代码中，我们首先获取被单击元素的文本内容，并将其存储在变量 title 中。然后，我们将 title 变量的值传递给 #title-area 元素的 .html() 方法。.html() 方法会将传递的内容显示在元素中。

Markdown 片段

# 如何单击标题以在 jQuery 中添加另一个标题？

在开发 Web 应用程序时，经常需要在用户单击某个元素时动态地添加内容。本篇介绍如何在 jQuery 中，通过单击一个标题，添加另一个标题。

## HTML 基础结构

我们有一个简单的 HTML 结构，其中包含一个标题列表和一个空的标题区域。

```html
<h2>我的标题列表</h2>
<ul>
  <li><a href="#">标题1</a></li>
  <li><a href="#">标题2</a></li>
  <li><a href="#">标题3</a></li>
</ul>

<div id="title-area"></div>
```

## 在 jQuery 中添加单击事件

我们首先需要添加一个 jQuery 单击事件，当用户单击标题时，触发此事件。

```js
$(document).ready(function() {
  $('ul li a').click(function() {
    // 在此处添加代码
  });
});
```

在上面的代码中，我们使用 jQuery 选择器选中所有 li 元素下的 a 元素，并添加单击事件。当用户单击 a 元素时，会触发此事件。

## 在空白区域添加标题

现在，我们需要在空白的标题区域中添加标题。我们将使用 jQuery 的 `.html()` 方法来实现此目的。

```js
$(document).ready(function() {
  $('ul li a').click(function() {
    var title = $(this).html();
    $('#title-area').html('<h2>' + title + '</h2>');
  });
});
```

在上面的代码中，我们首先获取被单击元素的文本内容，并将其存储在变量 `title` 中。然后，我们将 `title` 变量的值传递给 `#title-area` 元素的 `.html()` 方法。`.html()` 方法会将传递的内容显示在元素中。