JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<div id="parent"><span id="area">ココが変わります。</span></div>
<button onclick="replaceBtn1()">置換A</button>
<button onclick="replaceBtn2()">置換B</button>

JavaScript

function replaceBtn1() {
  var parent = document.getElementById('parent');
  var area = document.getElementById('area');
  var input_a = document.createElement('input');
  input_a.type = 'text';
  input_a.id = 'area';
  input_a.placeholder = 'フォームA';
  parent.replaceChild(input_a, area);
}

function replaceBtn2() {
  var parent = document.getElementById('parent');
  var area = document.getElementById('area');
  var span_b = document.createElement('span');
	span_b.id = 'area';
  span_b.innerHTML = '置換Bによって変更されました。';
  parent.replaceChild(span_b, area);
}