<div><input type="text" value="Dale"/></div>
<div><button id="append">append</button></div>
<div><button id="appendChild">appendChild</button></div>
<div><button id="insertAdjacentHtml">insertAdjacentHtml</button></div>
<div><button id="innerHtml">innerHTML</button></div>
</div>

<ul id="buddies">
	<li><a>Alex</a></li>
	<li><a>Barry</a></li>
	<li><a>Clive</a></li>
	<!-- Put next user here -->
</ul>

<p id="message"></p>

div{
  padding: 5px;
}

a{
  cursor: pointer;
}
a:hover{
  color: red;
}
#message{color: red;}

const getName = () => {
  return document.querySelector('input').value
}

const test_append = () => {
  const new_buddy = document.createElement('li')
  const new_link = document.createElement('a')

  new_link.append(getName())
  new_buddy.append(new_link)

  const list = document.querySelector('#buddies')
  list.append(new_buddy) 
}

const test_appendChild = () => {
  const new_buddy = document.createElement('li')
  const new_link = document.createElement('a')

  new_link.textContent = getName()
  new_buddy.appendChild(new_link) 

  const list = document.querySelector('#buddies')
  list.appendChild(new_buddy)
  
}

const test_insertAdjacentHtml = () => {
  const new_buddy = `<li><a>${getName()}</a></li>`
  const list = document.querySelector('#buddies')
  list.insertAdjacentHTML('beforeend',new_buddy)
}

const test_innerHtml = () => {
  const new_buddy = `<li><a>${getName()}</a></li>`
  const list = document.querySelector('#buddies')
  
  list.innerHTML += new_buddy
}

document.querySelector('#append').addEventListener('click', test_append)
document.querySelector('#appendChild').addEventListener('click', test_appendChild)
document.querySelector('#insertAdjacentHtml').addEventListener('click', test_insertAdjacentHtml)
document.querySelector('#innerHtml').addEventListener('click', test_innerHtml)