データを失わずに「要素」にテキストを追加するにはどうすればよいですか?

<div> へのテキストの追加データ損失のない要素

AJAX を使用して <div> を変更する場合要素のコンテンツを変更する場合は、新しいデータが既存のコンテンツを上書きしないようにすることが重要です。この問題の解決策は次のとおりです。

var div = document.getElementById('divID');
div.innerHTML += 'Extra stuff';

このコードは、<div> の既存のコンテンツに新しいテキストを追加します。要素。 innerHTML プロパティには、要素の HTML コンテンツ全体が含まれます。 = 演算子を使用すると、既存のコンテンツを置換するのではなく追加します。

説明:

getElementById メソッドは、<div> への参照を返します。指定された ID (「divID」) を持つ要素。 innerHTML プロパティには、その要素内の HTML コンテンツが含まれます。

= 演算子は、innerHTML プロパティの末尾に文字列「Extra Staff」を追加します。これにより、既存のコンテンツを削除することなく、新しいテキストが効果的に追加されます。

例:

<div> を考えてみましょう。 ID が「dataDiv」の要素:

<div>

JavaScript コードを実行すると:

var div = document.getElementById('dataDiv');
div.innerHTML += 'New Data';

<div>

<div> の結果の HTML コンテンツ。要素は次のようになります:

このアプローチにより、<div> のコンテンツをシームレスに更新できます。既存のコンテンツを失うことなく、新しいデータを要素に追加します。

以上がデータを失わずに「要素」にテキストを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。