ianychoi/fetch.html

## fetch.html
<!DOCTYPE html>
<html>
<head>
  <title>Fetch API test with KoreanJSON</title>
  <meta charset="utf-8" />
</head>
<body>
  <h1>KoreanJSON - Post</h1>
  <form>
    Post ID:
    <input type="text" id="postid" value="1" />
    <button type="button" onclick="doAction()">Get Post</button>
  </form>

  <ul id="post">

  </ul>

  <script>

     function doAction(){

      alert('시작');

      const ul = document.getElementById('post');
      const list = document.createDocumentFragment();
      const postid = document.getElementById('postid').value;
      const url = 'https://koreanjson.com/posts/' + postid;

      fetch(url)
        .then((response) => {
          console.log("통신 시작");
          return response.json();
        })
        .then((data) => {
          console.log(data);

          let li = document.createElement('li');
          let postid = document.createElement('h4');
          let title = document.createElement('h5');
          let content = document.createElement('span');

          postid.innerHTML = `${data.id}`;
          title.innerHTML = `${data.title}`;
          content.innerHTML = `${data.content}`;

          li.appendChild(postid);
          li.appendChild(title);
          li.appendChild(content);
          list.appendChild(li);
          ul.appendChild(list);
        })
        .catch(function(error) {
          console.log(error);
        });

      ul.appendChild(list);

      console.log('종료');
     }
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Fetch API test with KoreanJSON</title>
	<meta charset="utf-8" />
	</head>
	<body>
	<h1>KoreanJSON - Post</h1>
	<form>
	Post ID:
	<input type="text" id="postid" value="1" />
	<button type="button" onclick="doAction()">Get Post</button>
	</form>

	<ul id="post">

	</ul>

	<script>

	function doAction(){

	alert('시작');

	const ul = document.getElementById('post');
	const list = document.createDocumentFragment();
	const postid = document.getElementById('postid').value;
	const url = 'https://koreanjson.com/posts/' + postid;

	fetch(url)
	.then((response) => {
	console.log("통신 시작");
	return response.json();
	})
	.then((data) => {
	console.log(data);

	let li = document.createElement('li');
	let postid = document.createElement('h4');
	let title = document.createElement('h5');
	let content = document.createElement('span');

	postid.innerHTML = `${data.id}`;
	title.innerHTML = `${data.title}`;
	content.innerHTML = `${data.content}`;

	li.appendChild(postid);
	li.appendChild(title);
	li.appendChild(content);
	list.appendChild(li);
	ul.appendChild(list);
	})
	.catch(function(error) {
	console.log(error);
	});

	ul.appendChild(list);

	console.log('종료');
	}
	</script>

	</body>
	</html>