JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<h1 id="mainTitle">メインの見出しです</h1>
<ul id="globalNavi">
    <li><a href="#" title="ナビゲーション1">ナビ01</a></li>
    <li><a href="#" title="ナビゲーション2">ナビ02</a></li>
    <li><a href="#" title="ナビゲーション3">ナビ03</a></li>
    <li><a href="#" title="ナビゲーション4">ナビ04</a></li>
    <li><a href="#" title="ナビゲーション5">ナビ05</a></li>
</ul>

<div id="textArea01">
<p class="someText">何か文章がここに入ります。何か文章がここに入ります。何か文章がここに入ります。何か文章がここに入ります。何か文章がここに入ります。何か文章がここに入ります。何か文章がここに入ります。何か文章がここに入ります。</p>

<p class="someText">何か違う文章。何か違う文章。何か違う文章。何か違う文章。何か違う文章。何か違う文章。何か違う文章。何か違う文章。何か違う文章。何か違う文章。何か違う文章。何か違う文章。</p>
</div>

<div id="blankSect">

</div>

JavaScript

//ナビに1つli要素を追加してみる。
var globalNavi = document.getElementById('globalNavi');
var newElement = document.createElement('li');
globalNavi.appendChild(newElement);

//中のテキストのいれこみ
var newText = document.createTextNode('appendChildで追加されたテキスト');
newElement.appendChild(newText);


//============================================
//id="blankSect"に要素と中身のテキストを追加してみる。
var newHeading = document.createElement('h2');
var newParagraph = document.createElement('p');

//中身のテキストの追加
newHeading.innerHTML = '新しいH2見出し';
newParagraph.innerHTML = 'JSによって追加された文章。JSによって追加された文章。';

//実際にid="blankSect"に追加する
var blankSect= document.getElementById('blankSect');
blankSect.appendChild(newHeading);
blankSect.appendChild(newParagraph);
//もしくは以下の書き方。変数に入れないで直接書く。
//document.getElementById('blankSect').appendChild(newHeading);
//document.getElementById('blankSect').appendChild(newParagraph);



//============================================
//場所を指定して要素を追加してみる
var newElement2 = document.createElement('li');
var secondListItem = document.getElementsByTagName('li')[1];
var newText2 = document.createTextNode('insertBeforeで入れられた文章');
newElement2.appendChild(newText2);
globalNavi.insertBefore(newElement2, secondListItem);