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 がトランザクション分離レベルを巧みに実装する方法

推薦する

React 星評価コンポーネントの実装

要件は、製品の評価データを渡すことであり、ページには対応する星の数が表示されます。 1. 異なる評価...

数十行のjsを使用してクールなキャンバスインタラクティブ効果を実現する方法を教えます

目次1. 円を描く2. マウスで動かした円3. マウスでドラッグした粒子4. カラーグラデーション粒...

Vueプロジェクトを大画面に適応させる方法の例

レムの簡単な分析まず、remはCSS単位です。pxの固定ピクセル単位と比較すると、remはより柔軟性...

MySQL 空間データストレージと関数

目次1. データ型1. MySQL空間データとは何か2. GeoJSONとは3. 空間データ型のフォ...

MySQLがbinlogファイルを手動で登録し、マスタースレーブ異常を引き起こす理由

1. 問題の原因友人の @水米田 から、POSITION に基づくマスタースレーブについて質問があり...

HTML のスクロールバーについて/スクロールバーの削除

1. xhtmlの下のスクロールバーの色元の HTML では、ページ全体のスクロール バーを次のよう...

静的ウェブサイトをRSSに変換するツール

<br /> この記事は allwebdesignresources.com から Ra...

MySQL 8.x msi バージョンのインストール チュートリアル (画像とテキスト付き)

1. MySQLをダウンロードする公式サイトのダウンロードアドレス https://dev.mys...

MySQL テーブルとデータベース シャーディングのアプリケーション シナリオと設計方法

多くの友人がフォーラムやメッセージエリアで、どのような状況で MySQL をシャーディングする必要が...

JavaScript es6 の新しい配列メソッドの詳細な説明

目次1. 各() 2. arr.filter() 3. arr.every() 4. arr.map...

MySQL エラー コード 1862 の解決方法: パスワードの有効期限が切れています

ブロガーは 1 ~ 2 か月間 MySQL を使用していませんでしたが、今日この問題に遭遇しました。...

MySQL 8.0.13 のインストールと設定のグラフィックチュートリアル

Msyqlデータベースのインストール、参考までに具体的な内容は次のとおりです。 ①ブラウザでhttp...

Docker デプロイメント Consul 構成プロセスの分析

コマンドを実行docker run -d --name consul -p 8500:8500 co...

nginx でのリクエストのカウント追跡の簡単な分析

まずは適用方法を説明します。nginxモジュールにはjtxyとjtcmdの2つがあります。 http...

Ubuntu16.04にCUDA9.0をインストールするための詳細なチュートリアル

序文:この記事は、CUDA 9.0 をインストールした経験に基づいています。CUDA 9.0 は現在...