第25章 事件作业

补全代码，要求：

• 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
• 当点击每一个元素li时控制台展示该元素的文本内容。

<ul class="ct">
  <li>这里是</li>
  <li>饥人谷</li>
  <li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//你的代码
</script>

我的回答：

function $(selector){
  return document.querySelector(selector);
}
function $$(selector){
  return document.querySelectorAll(selector);
}
function id(idf){
  return document.getElementById(idf);
}


$('.ct').addEventListener('click',function(e){
   if(e.target.nodeName.toLowerCase() === 'li'){
     console.log(e.target.innerText);
  }
});

id('btn-add-end').addEventListener('click',function(){
  var li = document.createElement('li');
  li.innerText = $('.ipt-add-content').value;
  $('.ct').appendChild(li);
});

id('btn-add-start').addEventListener('click',function(){
  var li = document.createElement('li');
  li.innerText = $('.ipt-add-content').value;
  $('.ct').insertBefore(li,$('.ct').firstChild);
});