简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

jQuery は div_html/css_WEB-ITnose の動的追加と削除を実装します。

WBOY
リリース： 2016-06-24 11:37:48
オリジナル
1186 人が閲覧しました

この記事では、一例から推測する効果を期待して、要素内の div を動的に追加および削除する方法を主に紹介します。

コード例は次のとおりです: 

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">#father{ width:150px; height:150px; background-color:red;}#father div{ width:50px; height:50px; background-color:green; font-size:12px;}</style><script type="text/javascript" src="/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){ $("#father").prepend("<div>100素材网</div>");})</script></head><body><div id="father"></div></body></html>
ログイン後にコピー

上記のコードは、親 div に div を追加することができます。 次に、コア コードのみを以下に示します。

上記のコードは追加したdivを削除することができます。

例 2:

rree 

$(document).ready(function(){ $("#father").prepend("<div>100素材网</div>"); $("div").remove("#father div");})
ログイン後にコピー

関連ラベル：
jQuery实现动态添加和删除一个div
ソース：php.cn
前の記事：//www.hmt8.com/pfmr/hhb/804.html]肝斑はレーザーで除去できます[/url]jundacha_html/css_WEB-ITnose 次の記事：CSS フォーマット_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
書き換えられたタイトル: reCAPTCHA による認証 - ログイン ボタンに接続 私は自分の小さなプロジェクトに reCaptcha を実装しようとしています。ログイン検証フォームセクションの下に 2 つのスクリプトを追加し、reCaptcha は正常に動作して...
から 2023-09-04 11:27:54
0
1
232
ユーザーは並べて配置した div をドラッグして幅を調整できます。 2つのdivを並べて配置しています。簡単な解決策がある場合は、ユーザーがドラッグして両方の div の幅を変更できるようにします。 1 つの div の幅が増加すると、もう 1 つ...
から 2023-08-28 17:28:25
0
1
187
2018 年 9 月 14 日の教育コースのプレビュー: 一般的な DOM 操作と実践例 1. 教育トピック: 一般的な DOM 操作: ドキュメント オブジェクト モデル (DOM、ドキュメント オブジェクト モデル) は、主に HTML および XML ドキュメント...
から 2018-09-14 10:52:17
0
0
997
javascript - キャンセルボタンをクリックしたときに、元のデータを残したまま、jqueryによって動的に追加されたデータを削除するにはどうすればよいですか? 図に示すように、これはポップアップ ボックスです。赤丸の内容は、jquery によって動的に追加されたものに適しています。保存またはキャンセルした後に動的に追加されたものを削除し、...
から 2017-05-18 10:50:42
0
5
379
nginx - クラウド サービスはカスタマイズされたドメイン名サービスをどのように提供し、このカスタマイズされたドメイン名がサイトの下の第 2 レベルのドメイン名を指すようにするのですか? 現在、クラウド サービスを提供しています。顧客は専用の第 2 レベル ドメイン名を持っています。ドメイン名の下には、カスタマイズされた静的リソースと動的リソースがいくつかあります。...
から 2017-05-16 17:20:23
0
1
476
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！