如何通过点击事件向input输入框添加文本？点击热门关键词填入搜索框问题

原代码存在的两处核心错误 #

• 取点击的关键词内容逻辑错误：
  原代码使用$('#searchHot li').val()取值，存在两个问题：①val()是专为表单元素设计的取值方法，<li>是普通文本标签，无法通过val()获取内容；②$('#searchHot li')会选中所有热门词列表项，而非你当前点击的那一个，需要用$(this)指向当前触发点击事件的元素，再调用text()方法取文本内容。
• 给搜索框赋值逻辑错误：
  原代码使用text(name)给搜索输入框赋值，<input>元素的展示内容存储在value属性中，text()方法只能修改普通标签的内部文本，无法修改输入框的值，需要调用val(name)方法完成赋值。

修正后的完整代码 #

JS代码 #

$(document).ready(function() {
  $('#searchHot li').click(function() {
    // 取当前点击的li的文本内容
    var name = $(this).text();
    // 给搜索输入框赋值
    $('#searchInput input').val(name);
  })
});

HTML代码（功能可正常运行，补充优化提示：ul下直接放span不符合HTML语义规范，建议将Popular提示移到ul标签外） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div id="searchInput">
    <input type="search">
  </div>
  <ul id="searchHot">
    <span>Popular:</span>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
    <li>DDD</li>
  </ul>
</div>

内容的提问来源于stack exchange，提问作者Lorraine1996