下に$(txt)を追加するように、入力ボックスにfddを表示する入力内容を追加します(「名前付き」ボタンをクリック).
必ずしもこの順番で考える必要はありません.正解はない!

1.ボタンクリック時に起動

<button onclick="functionName()"> <button>

タグに「onclick」という属性を追加することで、この<button>タグは「クリック」イベントで何らかの動作をするやつ(ポケモン)に進化する.
しかし、そのボタンをクリックすると何が起こるのでしょうか.=「functionName()」です.

2.何が起こったかを定義する

HTMLボタンラベルにありますが、関数はJavaScriptコードです.「アクション」や「クリック」などの「イベント」でユーザーと「インタラクション」するのは、ほとんどがJavaScriptの仕事です.

function functionName(){
	//무슨 일이 벌어지게 하고 싶으신가요? 그걸 이 안에 javascript코드로 짜서 넣어봅시다!
}

何が起こりたいの?

1)入力ボックスに入力した値。

let txt = $("#id").val()

2)これを底部に貼り付けることができる適切なHTMLコードとする.

let temp_html = `<li>${txt}</li>`

3)適切な場所にHTMLコードを追加する

$("#tagName").append(temp_html)

以下はTMI

1）入力ボックスの値

もしその中に何か値が入力されたら、その値が何なのか知っていますよね?次のjQueryコードで説明します.

	let txt = $("#idName").val()

ここで、#idNameは、入力ボックスに<input id='idName'>のようなidNameというidがあると仮定する.コードをよく見てみましょう.
1)let-JavaScript変数の作成(宣言)を開始します.
(TMI:varとconst.気になるなら検索!)
2)txt-宣言する変数の名前.あなたが使いたい言葉で表現することができますが、変数名を設定する習慣を身につけて、私と他の人が何のためにいるのかを理解したほうがいいです.
3)=-右側の値を左側に入れる変数(保存するには代入する)を表します.数学の「同じ」とは少し違います.(プログラミングでは、通常==を使用して同じかどうかを確認します.)
4)$-純(バニラ)JavaScriptではなくjQueryを使用する場合のルール.$jQueryを使用します.
5)("#idName")-選択者と呼ばれます.より厳密に言えば、#idNameだけが選択者なのでしょうか?いずれにしても、現在のWebページ(HTMLドキュメント)でidNameというIDのタグを選択(指定)します.
6) .val()-前に指定した値を取得します.
$("#idName").val()は、実行時に入力ボックスの「fddd」値となります.では、「fdd」はtxtという変数に値として格納されますよね?

2)最後まで貼り付けることができる適切なHTMLコードにする

<ul id="tagName">
  <li> 세종대왕 </li>
  <li> 임꺽정 </li>
  <li> 3번 </li>
</ul>

let temp_html = `<li>${txt}</li>`

temp htmlにコンテンツを書き込む場合は、txtではなくbacktic(`)を使用して変数を識別し、変数に含まれるコンテンツを出力する必要があります.
HTMLには、リストを作成するための上記のタグが含まれています.ulタグにliタグをいくつか入れると各liタグの前にポイントがありますリスト形式で表示します.私たちが置く場所を見てliラベルを使っていることに気づきました△ソースコードを直接見たり、開発者ツールで撮ったりすればわかるでしょう.
そのため、底に新しく追加した価格も<li>ラベルで包みます!

3)適切な場所にHTMLコードを追加する

$("#tagName").append(temp_html)

選択者によって作成されたHTMLコードはどこに置くべきか(<ul>ラベルに入れるべきでしょう?)を選択します.
.appendで選択したやつの内部にコードを置きます.
かっこに何を入れますか.上に作成したteml html(名前の変数に置かれたHTMLコード)です.
この下は本当にTMI
△スパルタの基礎科目の魅力は、少なくとも理論を教えることです.理論よりも、実際の動作のコード作成や「熟知」に重点を置いています.だから面白い!だから見なくてもいいですよ.ほほほ、続けていけば、後で自然にわかります.

番外(TMI)。関数名の後ろにある()は何ですか。

function sum(a1, a2){
	return a1+a2
}
let a = 5
let b = 7
let c = sum(a,b)
console.log(c)

上のコードを見たことがありますか.コンソールには何が表示されますか?12が出ると思いませんか?
関数を定義するときは、関数名()と書きます.この関数を実行するには値が必要ないことを示します.
逆に、sum(a 1,a 2)と書いてある場合は、このsum関数を書くために、a 1とa 2という2つの値を入力します.△銀行で通帳を作りたいなら、身分証明書を持ってきてください.あなたが作ったように.
sum()と呼ぶときにエラーが発生しました.(エラー内容:関数を実行する値がないため、関数を実行できません.)
これは、a 1およびa 2に対応する関数である(上記のコードでは、aおよびbはそれぞれa 1およびa 2の役割を果たす).関数の内容を見て、a 1とa 2がどんな値なのか分からない場合、この関数はどのように実行されますか?ほほほ