Как заменить значение переменной из того же элемента H1 в JavaScript?

Question

На моей веб-странице у меня есть выпадающий список, где каждый раз, когда элемент из списка выбирается, он становится первым дочерним элементом этого списка. Оттуда создается элемент H1, где этот первый дочерний элемент (хранящийся в переменной 'drink') добавляется к элементу H1, читая "drink.text ()? Great Choice". Однако, когда пользователь хочет изменить свой выбор, меняя первого ребенка в списке, я хочу изменить переменную 'drink' из того же исходного H1.

Код:

console.clear();

var el = {};

$('.placeholder').on('click', function(ev) {
  $('.placeholder').css('opacity', '0');
  $('.list__ul').toggle();
});

$('.list__ul a').on('click', function(ev) {
  ev.preventDefault();
  var index = $(this).parent().index();

  $('.placeholder').text($(this).text()).css('opacity', '1');

  console.log($('.list__ul').find('li').eq(index).html());

  $('.list__ul').find('li').eq(index).prependTo('.list__ul');
  $('.list__ul').toggle();


  var drink = $('.list__ul li:first-child');

  var h = document.createElement("H1");
  h.classList.add("dranks");
  var t = document.createTextNode(drink.text() + '? Great Choice.');
  h.appendChild(t);
  document.body.appendChild(h);

  $(".dranks").html(drink.text() + '? Great Choice.');


});


$('select').on('change', function(e) {

  // Set text on placeholder hidden element
  $('.placeholder').text(this.value);
  // Animate select width as placeholder
  $(this).animate({
    width: $('.placeholder').width() + 'px'
  });

});

.typo,
.list a {
  font-size: 55px;
  font-weight: 700;
  font-family: 'Source Sans Pro', sans-serif;
  color: #202530;
  text-decoration: none;
  letter-spacing: 0em;
  text-transform: lowercase;
}

.typo option,
.list a option {
  font-size: 55px;
}

.transition {
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.wrapper {
  padding-top: 150px;
  height: 100vh;
  font-size: 55px;
}

.list {
  display: inline-block;
  position: relative;
  margin-left: 6px;
}

.list ul {
  text-align: left;
  position: absolute;
  padding: 0;
  top: 0;
  left: 0;
  display: none;
  letter-spacing: 0.05em;
}

.list ul .active {
  display: block;
}

.list li {
  list-style: none;
  padding-top: 3px;
}

.list li:first-child a {
  color: #e5b78e;
}

.list a {
  -webkit-transition: all .4s;
  transition: all .4s;
  color: #e5b78e;
  position: relative;
}

.list a:after {
  position: absolute;
  content: '';
  height: 5px;
  width: 0;
  left: 0;
  background: #dea26e;
  bottom: 0;
  -webkit-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

.list a:hover {
  cursor: pointer;
  color: #dea26e;
}

.list a:hover:after {
  width: 100%;
}

select {
  display: inline;
  border: 0;
  width: auto;
  margin-left: 10px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-bottom: 2px solid #555;
  color: #e5b78e;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

select:hover {
  cursor: pointer;
}

select option {
  border: 0;
  border-bottom: 1px solid #e5b78e;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.placeholder {
  border-bottom: 4px solid;
  cursor: pointer;
  letter-spacing: 0em;
  color: #202530;
}

.placeholder:hover {
  color: #e5b78e;
}

.dranks {
  position: absolute;
  z-index: 2;
  font-family: arial;
  font-weight: bold;
  font-size: 50px;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper typo">today i'm feeling like a
  <div class="list"><span class="placeholder">select</span>
    <ul class="list__ul">
      <li><a href="">Flat White</a></li>
      <li><a href="">Long Black</a></li>
      <li><a href="">Cappuccino</a></li>
      <li><a href="">Mochaccino</a></li>
    </ul>
  </div>
</div>

Как вы можете видеть из моей попытки, мне удалось это сделать несколько, но я чувствую, что это определенно неправильный способ сделать это. Буду признателен за любую помощь в решении.

Answer 1

Проверьте, существует ли H1, и создайте его, только если нет.

console.clear();

var el = {};

$('.placeholder').on('click', function(ev) {
  $('.placeholder').css('opacity', '0');
  $('.list__ul').toggle();
});

$('.list__ul a').on('click', function(ev) {
  ev.preventDefault();
  var index = $(this).parent().index();

  $('.placeholder').text($(this).text()).css('opacity', '1');

  console.log($('.list__ul').find('li').eq(index).html());

  $('.list__ul').find('li').eq(index).prependTo('.list__ul');
  $('.list__ul').toggle();


  var drink = $('.list__ul li:first-child');

  var h = $("h1.dranks");
  if (h.length == 0) {
    h = $("<h1>", {
      "class": "dranks"
      }).appendTo($('body'));
  }
  h.text(drink.text() + '? Great Choice.');


});


$('select').on('change', function(e) {

  // Set text on placeholder hidden element
  $('.placeholder').text(this.value);
  // Animate select width as placeholder
  $(this).animate({
    width: $('.placeholder').width() + 'px'
  });

});

.typo,
.list a {
  font-size: 55px;
  font-weight: 700;
  font-family: 'Source Sans Pro', sans-serif;
  color: #202530;
  text-decoration: none;
  letter-spacing: 0em;
  text-transform: lowercase;
}

.typo option,
.list a option {
  font-size: 55px;
}

.transition {
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.wrapper {
  padding-top: 150px;
  height: 100vh;
  font-size: 55px;
}

.list {
  display: inline-block;
  position: relative;
  margin-left: 6px;
}

.list ul {
  text-align: left;
  position: absolute;
  padding: 0;
  top: 0;
  left: 0;
  display: none;
  letter-spacing: 0.05em;
}

.list ul .active {
  display: block;
}

.list li {
  list-style: none;
  padding-top: 3px;
}

.list li:first-child a {
  color: #e5b78e;
}

.list a {
  -webkit-transition: all .4s;
  transition: all .4s;
  color: #e5b78e;
  position: relative;
}

.list a:after {
  position: absolute;
  content: '';
  height: 5px;
  width: 0;
  left: 0;
  background: #dea26e;
  bottom: 0;
  -webkit-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

.list a:hover {
  cursor: pointer;
  color: #dea26e;
}

.list a:hover:after {
  width: 100%;
}

select {
  display: inline;
  border: 0;
  width: auto;
  margin-left: 10px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-bottom: 2px solid #555;
  color: #e5b78e;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

select:hover {
  cursor: pointer;
}

select option {
  border: 0;
  border-bottom: 1px solid #e5b78e;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.placeholder {
  border-bottom: 4px solid;
  cursor: pointer;
  letter-spacing: 0em;
  color: #202530;
}

.placeholder:hover {
  color: #e5b78e;
}

.dranks {
  position: absolute;
  z-index: 2;
  font-family: arial;
  font-weight: bold;
  font-size: 50px;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper typo">today i'm feeling like a
  <div class="list"><span class="placeholder">select</span>
    <ul class="list__ul">
      <li><a href="">Flat White</a></li>
      <li><a href="">Long Black</a></li>
      <li><a href="">Cappuccino</a></li>
      <li><a href="">Mochaccino</a></li>
    </ul>
  </div>
</div>