js_javascript スキルの初心者向けの新しいノードの作成と削除の手順

これらの特殊効果を書いた先輩プログラマーが羨ましいです。学びたいのですが、論理的な考え方や使い方がいつもわかりません。とても不安になることもありますが、幸いにも私に教えてくれたり指導してくれる人たちがいるので、私は比較的幸運です。でも私の最大の欠点は、やり方が分からないと諦めてしまう事です。聞く。この大きな欠点は修正されなければなりません。以下はヤン兄弟が私に教えてくれた学習テクニックです。私の考え方は明確になり、効率が大幅に向上しました。 。これ以上ナンセンスではないので、本題に戻りましょう:
タイトル: 追加ボタンをクリックするとノードが追加され、削除ボタンをクリックすると最後のノードが削除され、追加された新しい要素は次のようになります。ワンクリックで削除されます。
ステップ 1: アイデアを分析し、準備をします (構造、動作、パフォーマンスの分離は、HTML 構造、JS スクリプト、CSS スタイルの分離です)
最初に: HTML 構造を構築し、CSS スタイルを定義します、基本的なスクリプトを書きます（jsスクリプトとhtmlの構造が別なので）。

コードをコピー コードは次のとおりです:

最初の 2 つのボタンの onclick イベント、次に追加と削除をメソッドにカプセル化して、関数を再利用のために呼び出せるようにします。

コードをコピー コードは次のとおりです。

window.onload = function() {
addBtn .onclick = function() {}
removeBtn.onclick = function() {}
}

ステップ 2: 作成メソッドを記述する: 新しいノードを作成する

コードをコピー コードは次のとおりです。

function createEle() {
var newEle = document.createElement("div "); // 新しい要素ノード変数を定義します
var newBtn = document.createElement("input") // 新しい要素ノード変数を定義します
var boxEle = document.getElementById ( "boxcon");
// これは上位レベルの要素であるため、追加する要素を見つけます。
newEle.className="con";//新しい要素に割り当てられる属性スタイルは css
newBtn.type ="button";
newBtn.value = "remove ";//新しいノードを追加しますto boxcon
}

ステップ 3: 削除メソッドを記述します。要素を削除します。

コードをコピーします コードは次のとおりです。

function RemoveEle(removeObj) {
RemoveObj.parentNode .removeChild(removeObj);
//要素を削除
}

ステップ 4: 関数を呼び出す

コピーcode コードは次のとおりです。

window.onload = function() {
addBtn.onclick = function() {
createEle() ;
}
removeBtn.onclick = function() {
var box = document.getElementById("boxcon");
removeEle(box.lastChild); 🎜>

ははは、もうすぐ完成です。もう 1 つ機能があります。最後にもう 1 つの機能。 。 (追加された新しい要素はワンクリックで削除されます)
以上。 。 。ははは、まだ使い方がよくわかりません。 。 。今後慎重に検討する必要がある。 。 。