appendChild3

歴代の首相をジャバスクリプトで追加
安倍晋三首相
 ===================================  code  ============================================
<body>
<div>
<p>歴代の首相をジャバスクリプトで追加</p>
<ul id="prime_minister_list">
<li>安倍晋三首相</li>
 </ul>
</div>




<script>
                            //var aChild = element.appendChild(aChild);
                           // ul要素を作成し、parentというクラスを付ける
var parentDiv = document.createElement("ul");
parentDiv.id = "prime_minister_list";
 
                           // 対象の要素.appendChild(追加するノード)
document.body.appendChild(parentDiv);
 
                                 // 追加したulを取得・確認
var prime_minister_list = document.getElementById("prime_minister_list");
console.log(prime_minister_list);
var prime_minister_list = document.getElementById("prime_minister_list");
 
                                     // リストを作成
var koizumi = document.createElement("li");
koizumi.setAttribute("id", "koizumi_prime_minister");
koizumi.innerHTML     = "菅 義偉首相";

var abe = document.createElement("li");
abe.setAttribute("id", "abe_prime_minister");
abe.innerHTML     = "岸田 文雄首相";

var kouno = document.createElement("li");
kouno.setAttribute("id", "kouno_prime_minister");
kouno.innerHTML     = "河野 太郎首相だろう";
 
 
 
                                    // さきほど作成したulの末尾に追加
                                    
prime_minister_list.appendChild(koizumi);
prime_minister_list.appendChild(abe);
prime_minister_list.appendChild(kouno);
console.log(prime_minister_list);

</script>

<!--
引用サイト
https://www.sejuku.net/blog/49970
-->
</body>