JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<h1 id="mainTitle">メイン見出し</h1>

<p class="textArea">何か文章文章文章、何か文章文章文章、何か文章文章文章、何か文章文章文章、何か文章文章文章、何か文章文章文章</p>

<ul id="nav">
    <li><a href="">ナビ1</a></li>
    <li><a href="">ナビ2</a></li>
    <li><a href="">ナビ3</a></li>
</ul>

<div id="brankSect"></div>

JavaScript

//新たに要素を作り出す
var newHeading = document.createElement('h2');
var newParagraph = document.createElement('p');

//中に入れるテキストを指定する
newHeading.innerHTML = '新しいH2見出し';
newParagraph.innerHTML = 'JavaScriptによって追加された文章。JavaScriptによって追加された文章。';

//id="brankSect"の部分にJSで作った要素を入れる
var brankSect = document.getElementById('brankSect');
brankSect.appendChild(newHeading);
brankSect.appendChild(newParagraph);

//場所を指定して要素を追加する
var newElement = document.createElement('li');
var nav = document.getElementsByTagName('li')[1];
var newText = document.createTextNode('追加されたリスト');
var navParent = document.getElementById('nav');

newElement.appendChild(newText);
navParent.insertBefore( newElement, nav );