JSはjQueryのappend関数を実装します

JSはjQueryのappend関数を実装します

コードを見せてください

HTMLElement.prototype.appendHTML = function(html) {
	divTemp = document.createElement("div"); とします。
	ノードを null にします。
	フラグメントを document.createDocumentFragment() に格納します。
	divTemp.innerHTML = html;
	ノード = divTemp.childNodes;
	ノード.forEach(アイテム => {
		フラグメントに子要素を追加します(item.cloneNode(true))。
	})
	// 最後に追加
	this.appendChild(フラグメント);
	// 先頭に挿入
	// this.insertBefore(フラグメント、this.firstChild);
	ノード = null;
	フラグメント = null;
};

効果をテストする

html

<スタイル>
。子供 {
  高さ: 50px;
  幅: 50px;
  背景: #66CCFF;
  下マージン: 1em;
}
</スタイル>

<div id="アプリ">
  <div class="child">
  <div class="child">
</div>

js

app = document.getElementById('app'); とします。
child を `<div class="child">down</div>` とします。
app.appendHTML(子);

効果

追伸

さらに、上に挿入したい場合は、コード内の this.appendChild(fragment); を this.insertBefore(fragment, this.firstChild); に変更するだけです。

別のアプローチ

var div2 = document.querySelector("#div2");
  div2.insertAdjacentHTML("beforebegin","<p>hello world</p>");//呼び出し要素の前に要素を追加しますdiv2.insertAdjacentHTML("afterbegin","<p>hello world</p>");//呼び出し要素内に子要素を追加し、最初の子要素を置き換えますdiv2.insertAdjacentHTML("beforeend","<p>hello world</p>");//呼び出し要素の後に子要素を追加し、最後の子要素を置き換えますdiv2.insertAdjacentHTML("afterend","<p>hello world</p>");//呼び出し要素の後に要素を追加します

ブラウザレンダリングの効果:

この方法はIEの最も古い方法なので互換性が特に良いです

以上がjQueryのappend関数を実装したJSの詳細です。jQueryのappend関数を実装したJSの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • jQuery に新しいコンテンツを追加する一般的な 4 つの方法 [append、prepend、after、before] の分析
  • jQueryでappendを使って追加された要素イベントが無効になる問題を解決する
  • jQuery の append メソッドと appendTo メソッドの比較
  • jQuery 追加要素の append、prepend、before、after の使用法と差異分析
  • IE7 で jQuery セレクタが追加エラーを引き起こす問題の解決策
  • jQuery の動的に追加された要素イベントが機能しない解決策
  • jQueryは、HTML要素の後に複数のコンテンツを同時に追加するためにappendを使用します。
  • JQueryがページに新しい要素を追加した後のイベントのバインディングの問題を解決する
  • jQuery appendTo() メソッドの使用例
  • jQuery append() メソッドの使用例

<<:  Ubuntu の起動後にアプリケーションを実行するためのターミナルの設定方法

>>:  InnoDB がトランザクション分離レベルを巧みに実装する方法

推薦する

MySQLデータのセキュリティを確保するための提案

データは企業の中核資産であり、企業にとって最も重要なタスクの 1 つです。注意しないと、データが意図...

挿入前にレコードが既に存在するかどうかを確認するには、SQL ステートメントを使用します。

目次SQL文を挿入する前にレコードが既に存在するかどうかを確認するSQL挿入時の判断の簡単なコレクシ...

uniappがインターフェースドメイン名を動的に取得する方法を分析する

背景インターフェイス ドメイン名はハードコードされておらず、動的に取得されます。具体的な実装は、静的...

Nginx Linux のインストールと展開の詳細なチュートリアル

1. Nginx の紹介Nginxは負荷分散やリバースプロキシにも使えるWebサーバーです。現在最も...

MySQLデータ損失の原因と解決策

目次序文問題の説明原因分析拡大する総括する序文最近、データの欠落やデータの損失に関するフィードバック...

mysql explain(分析インデックス)の使い方の詳しい説明

EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...

VueでEchartsチャートの幅と高さの適応を実現する実践

目次1. インストールとインポート2. 手ぶれ補正機能を定義する3. チャートコードを描くinit ...

Alibaba Cloud Server の詳細な展開 (グラフィック チュートリアル)

最近、Web 開発のフロントエンドとバックエンドの技術を学んだので、その後の管理を容易にするためにプ...

CSS+SVGでBステーションの課金効果を実現するサンプルコード

困難SVG グラフィックの 2 つのマスクの作成まず、コード左側のピンク色のボックスの内容ですこれに...

Vueカスタムディレクティブの詳細

目次1. 背景2. ローカルカスタム指示3. グローバルカスタム指示4.1 カスタムコマンドフック関...

MySQLの文字セットと検証ルールの詳細な説明

1いくつかの一般的な文字セットMySQL で最も一般的な文字セットには、ASCII 文字セット、ラテ...

Navicat を MySQL に接続するときに発生する 2059 エラーの解決方法

最近、Djangoを学習しているときにデータベースを使用する必要があったため、MySQLで使用するた...

Webデザインの経験: Webコードを効率的に書く

本来、この第 7 章では、デザインにおけるレイヤーと空間テクニックについて深く議論するはずです。しか...

Linux で PCIe のバージョンと速度を確認する方法

PCIE には 4 つの異なる仕様があります。下の図でそのうちの 2 つを見てみましょう。マザーボー...

iframe を介してフレームセットを本体に配置する

フレームセットと本文は同じレベルにあるため、本文にフレームセットを配置することはできません。まずペー...