实现以下页面效果： 1.实现点击上方的城市超链接，把城市名加入下方的列表中 2.当城市再次被点中时，将列表中该城市名移到第一位

好的，这个页面效果可以通过以下代码实现：

HTML 代码：

<div>
  <h2>请选择城市：</h2>
  <ul id="cityList">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
  </ul>
</div>
<div>
  <h2>可选城市：</h2>
  <ul id="cityLinks">
    <li><a href="#" data-city="北京">北京</a></li>
    <li><a href="#" data-city="上海">上海</a></li>
    <li><a href="#" data-city="广州">广州</a></li>
    <li><a href="#" data-city="深圳">深圳</a></li>
  </ul>
</div>

JavaScript 代码：

var cityList = document.getElementById('cityList');
var cityLinks = document.getElementById('cityLinks').getElementsByTagName('a');
for (var i = 0; i < cityLinks.length; i++) {
  cityLinks[i].addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认跳转行为
    var cityName = this.dataset.city;
    var cityItem = document.querySelector('#cityList li:nth-child(' + (i + 1) + ')');
    if (cityItem) {
      // 如果城市已经在列表中，则将其移到第一位
      cityList.insertBefore(cityItem, cityList.firstChild);
    } else {
      // 如果城市不在列表中，则添加到第一位
      var newItem = document.createElement('li');
      newItem.textContent = cityName;
      cityList.insertBefore(newItem, cityList.firstChild);
    }
  });
}

这段代码首先获取了两个元素，一个是城市列表 `cityList`，一个是城市链接列表 `cityLinks`。然后通过循环为每个城市链接添加了一个点击事件监听器，当链接被点击时，会执行回调函数。在回调函数中，首先阻止了默认的跳转行为，然后获取了被点击链接的城市名称 `cityName`。接着通过 `querySelector` 方法获取到城市列表中对应的城市项 `cityItem`，如果该城市已经在列表中，则将其移到第一位；否则创建一个新的城市项 `newItem`，并将其添加到列表的第一位。