fullcalendar内でjavascriptを利用し動的にリストを作成したい

Question

fullcalendar v3.9.0を利用しスケジュールカレンダーを作成しています。

図にある、左の予定リストについての質問です。
My Event1から5までHTMLのdivで作成してあるのですが、そこから追加ボタンで項目を増やせるようにしたいです。
自身でトライしたらMy Event6、7のようになってしまい困ってます…
また、追加をすると下に追加されてしまうのを上に変更しようと思い、appendChildをinsertBeforeに変えたんですが、動きません…

<div id='external-events'>
  <p>
    <strong>予定リスト</strong>
  </p>
  <div class='fc-event'>My Event 1</div>
  <div class='fc-event'>My Event 2</div>
  <div class='fc-event'>My Event 3</div>
  <div class='fc-event'>My Event 4</div>
  <div class='fc-event'>My Event 5</div>
	<input type="text" id="favtext" style="display:none;">
	<input type="button" id="addurl" value="追加" onclick="bar();" style="display:none;">
	<label>
		<img src="プラスオレンジ.png">
		<input type="checkbox" style="display: none;" onchange="clickBtn1(this.checked)">
	</label>
</div>

以下のコードが追加に関してです。

//↓リストの追加
function bar() {
    // a 要素の作成と属性の指定
    var newAnchor = document.createElement("a");
    var newTxt = document.createTextNode( document.getElementById("favtext").value );
    newAnchor.appendChild( newTxt );
   
    // 要素の作成
    var newDiv = document.createElement("div");
    newDiv.appendChild ( newAnchor );

   
    // リストに追加
    var list = document.getElementById("external-events");
    list.appendChild( newDiv );   
}

Answer 1

fullcalendar内でjavascriptを利用し動的にリストを作成したい

fullcalendar v3 ドキュメント からAPIを利用することになると思います。

• Event Data あたりでしょうか。

左の予定リストについて（中略）insertBeforeに変えたんですが

目の付け所は正しいです。MDN insertBefore()

• parentNode は どの親の子要素として挿入するのか？
• referenceNode は どの兄弟の前に挿入するのか？

<div> <!-- parentNode -->
  <div class='fc-event'>My Event 1</div>
  <div class='fc-event'>My Event 2</div>
  <div class='fc-event'>My Event 3</div>
  <div class='fc-event'>My Event 4</div>
  <div class='fc-event'>My Event 5</div>
  <input type="text" id="favtext"> <!-- referenceNode -->
</div>

挿入したい要素の親子/兄弟関係を確認した上で insertBefore() を使います。

var list = document.getElementById("external-events");
let refNode = document.getElementById("favtext");
list.insertBefore( newDiv, refNode )

Comments

[mori_reta]

insertBefore無事にできました！ありがとうございます！
また、動的リストはサイトにはなかったのですが、自己解決できました。
ありがとうございます！