JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<input type="button" value="追加" onclick="createArea()">
<div id="parent">
  <p id="child1">child1です。</p>
  <p id="child2">child2です。</p>
</div>

CSS

#parent {
  background-color: #eee;
  padding: 10px;
}
#child1 {
  background-color: yellow;
  padding: 10px;
}
#child2 {
  background-color: green;
  padding: 10px;
}
#blue {
  background-color: blue;
  padding: 10px;
  color: #fff;
}

JavaScript

function createArea () {
  var area = document.createElement('div');
  area.id = 'blue';
  area.innerHTML = '追加された要素です。';
  var parent = document.getElementById('parent');
  var child2 = document.getElementById('child2');
	parent.insertBefore(area, child2);
}