js_javascript スキルの初心者向けの新しいノードの作成と削除の手順-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:05:07

オリジナル

1154 人が閲覧しました

これらの特殊効果を書いた先輩プログラマーが羨ましいです。学びたいのですが、論理的な考え方や使い方がいつもわかりません。とても不安になることもありますが、幸いにも私に教えてくれたり指導してくれる人たちがいるので、私は比較的幸運です。でも私の最大の欠点は、やり方が分からないと諦めてしまう事です。聞く。この大きな欠点は修正されなければなりません。以下はヤン兄弟が私に教えてくれた学習テクニックです。私の考え方は明確になり、効率が大幅に向上しました。。これ以上ナンセンスではないので、本題に戻りましょう:
タイトル: 追加ボタンをクリックするとノードが追加され、削除ボタンをクリックすると最後のノードが削除され、追加された新しい要素は次のようになります。ワンクリックで削除されます。
ステップ 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 つの機能。 。 (追加された新しい要素はワンクリックで削除されます) 
以上。 。 。ははは、まだ使い方がよくわかりません。 。 。今後慎重に検討する必要がある。 。 。