JavaScriptで要素を追加および削除する方法-jsチュートリアル-php.cn

JavaScriptで要素を追加および削除する方法

醉折花枝作酒筹

リリース： 2023-01-04 09:35:16

オリジナル

3693 人が閲覧しました

JS で要素を追加および削除する方法: 1.「appendChild("要素名")」を使用して要素を追加します; 2.「insertBefore(要素名、要素を追加する場所)」を使用して追加しますどこでも要素; 3. 「removeChild("要素名")」を使用して要素を削除します。

JavaScriptで要素を追加および削除する方法

このチュートリアルの動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript で要素を追加および削除する方法

要素を追加するには、まず要素を作成する必要があります。新しく追加された要素テキストを入力するには、テキストノードを作成し、テキストノードの値を新しく追加された要素に挿入する必要があります。

(1) createElement("要素名"): このメソッドは新しい要素を作成できます。例: createElement("p") は、p タグ (要素/段落) が作成されることを意味します。

(2) createTextNode("Text Content"): このメソッドはテキストノードを作成できます。例: createTextNode("I am new content") は、値「I am new content」を持つテキストノードが作成されることを意味します。

(3) appendChild("要素名"): 新しい要素を追加します。例: ul.appendChild("li") は、li 要素を ul に追加することを意味します。

(4)removeChild("要素名"): 要素を削除します。使い方は(3)と逆になります。

次の例では、li 要素を ul に動的に追加し、毎回元の li の前に追加します。

<script>
      window.οnlοad=function () {
          var UL=document.getElementsByClassName(&#39;box&#39;)[0];
          var btn=document.getElementsByTagName(&#39;button&#39;);
          var index=1;  //序号计数器
          btn[0].οnclick=function () {    //创建新节点，并添加新元素,新添加的元素总是在最前面
              var li=document.createElement(&#39;li&#39;),  //创建li元素
                  content=&#39;我是第&#39;+index+&#39;个li&#39;;    //li元素的文本节点的内容
              var text=document.createTextNode(content);  //创建li元素的文本节点
              index++;   //每创建一个li计数就+1
              var Li=UL.getElementsByTagName(&#39;li&#39;);    //获取页面中的li集合
              UL.insertBefore(li,Li[0]),li.appendChild(text);  //在页面中第一个li前面添加新的li标签
          }
          btn[1].οnclick=function () {  //删除添加的元素
              var li=document.getElementsByTagName(&#39;li&#39;)[0];
              if(!index%2==0){
                  li.parentNode.removeChild(li);
              }
          }
      }
</script>
</head>
<body>
<button>点击添加新的li元素</button>
<button>点击删除li元素</button>
<ul class="box">
</ul>
</body>

ログイン後にコピー

注: 新しく追加した各 li を元の li の前に置きたい場合は、insertBefore() メソッドを使用する必要があります。

insertBefore()これには 2 つのパラメータ値があります。最初のパラメータ値は追加する要素の名前で、2 番目のパラメータ値は追加する要素の名前です。追加したい要素 (値は null にすることもできます)。null の場合、効果は appendChild() と同じです。

たとえば、上記の例では、毎回追加される要素 li を先頭にしたいとします。次に、変更する必要があるのは 4 番目のステップだけです:

var Li=UL.getElementsByTagName("li");
UL.insertBefore(li,Li[0]);li.appendChild(text);

ログイン後にコピー

つまり、新しい要素を追加するには 2 つの方法があります: ①appendChild()、②insertBefore(); 要素を削除します:removeChild()

推奨学習: JavaScript ビデオチュートリアル

以上がJavaScriptで要素を追加および削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

JavaScriptで要素を追加および削除する方法