JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<span>ここに追加されます↓</span>
<ul id="frame">
</ul>
<input type="text" id="input_form" onchange="addList()">
<input type="button" value="削除" onclick="deleteList()">

CSS

li {
  margin-left: 10px;
}
input {
  display: block;
  margin-top: 5px;
}
#frame {
  background-color: #A9E2F3;
  padding: 10px;
  max-width: 300px; 
}

JavaScript

function addList() {
  var input_area = document.getElementById('input_form');
  var input_value = input_area.value;
  var li_text = document.createElement('li');
	li_text.innerHTML = input_value;
  
  var parent = document.getElementById('frame');
  parent.appendChild(li_text);
  input_area.value = '';
}

function deleteList() {
  var parent = document.getElementById('frame');
  parent.innerHTML = '';
}