InsertBefore引数にはNodeを挿入する必要あり!テキストは挿入できない!

Web

InsertBeforeの引数に関する備忘録。

InsertBeforeの使い方

指定のノードを現在のノードの子ノードとして参照要素の前に挿入します。

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

出典:MDN Node.insertBefore

「insertBefore」の効果で、「referenceNode」の前に「newNode」を追加される。

ちなみに、insertBeforeはありますが、insertAfterというメソッドはありません。

InsertBeforeはNodeしか取れない!

当初誤っていた構文は以下の通り。

insertBeforeを使って、h3の前に「text」を追加したい。

<script> const btn = document.getElementById('btn'); 
btn.addEventListener('click', () =>
 { const text = document.getElementById('id_text').value; 
const h3 = document.getElementById('id_h3');
document.body.insertBefore(text, h3);

テキスト「text」をそのまま挿入していたので、エラーに。

document.createTextNode( )でtextをNode化する必要あり。

正しくは以下の通り。

<script>
 const btn = document.getElementById('btn');
 btn.addEventListener('click', () => { 
 const text = document.getElementById('id_text').value;
 const h3 = document.getElementById('id_h3');
document.body.insertBefore(document.createTextNode(text), h3);

これで無事、ブラウザに反映されました。

insertBeforeの使い方を間違えていた

insertBeforeでh2の前にtextを持ってきたいのですが、画像の以下の画像の通り、h2の下に文字が挿入されてしまいます。

当初書いていたコードは以下の通り。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ToDoリスト</title>
<link rel="stylesheet" href="css/styles.css">
​
</head>
<body>
<h1>ToDoリスト</h1>
​
<div class="radiobutton">
    <input type="radio" id="button-1" name="radio1" value="1" checked />
    <label for="button-1">すべて</label>
    <input type="radio" id="button-2" name="radio1" value="2" />
    <label for="button-2">完了中</label>
    <input type="radio" id="button-3" name="radio1" value="3" />
    <label for="button-3">作業中</label>
​
  <h3>ID コメント 状態</h3>
  <h2 id="id_h2>新規タスクの追加</h2>
  
  <p id=id_p>
      <input type="text" id="id_text" value=""> 
      <button id="btn" type="btn" class="button"> 追加</button>
  </p>
 
  <script>
    
    const btn = document.getElementById('btn');
    btn.addEventListener('click', () => { 
      const text = document.getElementById('id_text').value;
      const h3 = document.getElementById('id_h3');
​
      document.body.insertBefore(document.createTextNode(text), h2);​
    });​
  </script>​
</body>
</html>

今回、関係ないですけど、CSSのコードは以下の通り。

​
.button {
  border-radius: 10px;
}
.button:hover {
  background-color: #59b1eb;
}
.button:active {
  top: 3px;
  box-shadow: none;
}

.radiobutton label {
	padding: 0 0 0 24px;	/* ラベルの位置 */
	font-size: 16px;
	line-height: 28px;		/* ボタンのサイズに合わせる */
	display: inline-block;
	cursor:	pointer;
	position: relative;
}
.radiobutton label:before {
	content: '';
	width: 14px;		/* ボタンの横幅 */
	height: 14px;		/* ボタンの縦幅 */
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgb(0, 162, 255);
	border-radius: 50%;
}
.radiobutton input[type="radio"] {
	display: none;
}
.radiobutton input[type="radio"]:checked + label:after {
	content: '';
	width: 3px;		/* マークの横幅 */
	height: 3px;		/* マークの縦幅 */
	position: absolute;
  top: 5.5px;
	left: 5.5px;
	background-color: #fff;
	border-radius: 50%;
}

 

insertBeforeは第一引数で指定したものを第二引数で指定したものの末尾に加える関数。

現在、第二引数でh2を指定しているため、h2の最後尾にtextを追加するコードになっていました。

 

HTMLについて以下のようにコードを書き換えました。

 

 

コメント

タイトルとURLをコピーしました