ネイティブ js は append() メソッドを実装します

ネイティブ js は、特定のコード例を必要とする append() メソッドを実装します。

JavaScript コードを記述するとき、多くの場合、ウェブページ。一般的な操作は、innerHTML 属性を使用して要素の HTML コンテンツを設定することです。ただし、innerHTML 属性を使用すると、要素内のイベント リスナーやスタイルなどが失われる場合があります。コンテンツを追加する機能をより適切に実装するために、append() メソッドを自分で実装できます。

append() メソッドは、指定された要素の末尾に新しいコンテンツを追加できます。つまり、指定された HTML コード文字列を要素の内部に追加します。以下は、ネイティブ JavaScript を使用して append() メソッドを実装するコードです:

function append(element, html) {
  var div = document.createElement('div');
  div.innerHTML = html;
  
  while (div.children.length > 0) {
    element.appendChild(div.children[0]);
  }
}

上記のコードでは、2 つのパラメーターを受け取る append() という名前の関数を定義します。要素は、コンテンツを表します。 target要素のhtmlは追加するHTMLコード文字列を表します。

まず、div 要素を作成し、追加する HTML コード文字列を div 要素の innerHTML 属性に割り当てます。このようにして、HTML コード文字列を DOM 要素に解析します。

次に、while ループを使用して div 要素の子ノードを走査し、子ノードをターゲット要素に 1 つずつ追加します。反復中に、appendChild() メソッドを使用して、指定された要素の内側の端に子ノードを追加します。ループが終了すると、div 要素のすべての子ノードがターゲット要素に追加されます。

このカスタム append() メソッドを使用すると、対象の要素と追加する HTML コード文字列を渡して呼び出すだけで、指定した要素にコンテンツを追加する機能を安心して実装できます。内部イベントとスタイルの喪失について。

次は、カスタム append() メソッドの使用例です。ID が「myDiv」の要素があり、それに h1 タイトルと段落を追加するとします:

var myDiv = document.getElementById('myDiv');
var html = '<h1 id="这是一个标题">这是一个标题</h1><p>这是一个段落</p>';

append(myDiv, html);

上記のコードは、ID が「myDiv」の要素の内部に <h1 id="This-is-a-title">This is a title</h1> <p>This is a Paragraph</p> を追加します。 。

ネイティブ JavaScript を使用して append() メソッドを実装すると、要素内のイベント リスナーとスタイルを保持しながら、指定された要素にコンテンツをより柔軟に追加できます。カスタム メソッドを通じて、より制御可能で効率的かつ安全な DOM 操作を実現できます。

以上がネイティブ js は append() メソッドを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。