JavaScriptを使用してHTMLページに要素を水平方向に追加するにはどうすればよいですか?

JavaScript の「createElement」メソッドを使用して、新しい要素を作成できます。次に、「appendChild」メソッドを使用して、その要素を HTML ページの親要素に追加できます。要素を水平に配置するには、新しく作成した要素で「display:inline-block」や「float:left/right」などの CSS スタイルを使用できます。

リンク リスト データ構造のグラフィック表現を記述したいとします。ユーザーがボタンをクリックするたびに、新しいノード (この例では緑色の円で表されます) がノード リストの先頭に水平に追加されます。

そして、その緑色の円内のテキストは、その特定のノードのインデックスである必要があります。

ここでの方法は非常にシンプルで簡単です-

新しいノードを挿入するボタンを作成します。
ボタンをクリックするたびに、ノードの数が 1 ずつ増加します。
ノードのレンダリングを担当する別の関数がそのカウントを受け取り、ノードをレンダリングします。
ノードを逆の順序でレンダリングするには、コンテナ div の flex-direction プロパティを row-reverse に設定します。
例

これは、このアプローチの完全な実例です -

説明

説明

リンク リストの単純なグラフィック表現を作成するために、JavaScript を使用して基本的な HTML ファイルを作成しました。これには、クリックするとリンクされたリストに新しいノード (要素) を挿入し、グラフィック表示を更新する関数を呼び出すボタンがあります。

グラフィック表現は、クラス名「element」の div 要素を使用して作成され、円のスタイルが設定されています。要素は、「holder」の「id」を持つフレックス コンテナに表示されます。これは、ビューポート内の要素が多すぎる場合にスクロールできるように、overflow-x:scroll に設定されています。

以上がJavaScriptを使用してHTMLページに要素を水平方向に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。