HTML要素を動的に生成し、要素に属性を追加します。-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML要素を動的に生成し、要素に属性を追加します。

不言

Apr 26, 2018 pm 05:03 PM

html要素

この記事では主に HTML 要素の動的生成と要素への属性の追加について説明します。必要な方は参考にしてください。

HTML 要素を動的に生成する方法は 3 つあります。

1 つ目: document.createElement() は要素を作成し、appendChild() メソッドを使用してその要素を指定されたノードに追加します。 :

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title></title>  </head>  <body>  <p id="main">  
    <span id="login"></span>  </p>  </body>  <script>  
    var link = document.createElement(&#39;a&#39;);  
    link.setAttribute(&#39;href&#39;,&#39;#&#39;);  
    link.setAttribute(&#39;id&#39;,&#39;login&#39;);  
    link.style.color = &#39;green&#39;;  
    link.innerHTML = &#39;登录&#39;;  
    var main = document.getElementById(&#39;main&#39;);  
    main.appendChild(link);  
</script>  </html>

document.createElement()创建元素，再用appendChild()方法将元素添加到指定节点;

添加a元素：

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title></title>  </head>  <body>  <p id="main">  
    <span id="login"></span>  </p>  </body>  <script>  
    var link = document.createElement(&#39;a&#39;);  
    //使用innerHTML将元素直接添加到指定节点  
    main.innerHTML = "<a href=&#39;#&#39; id=&#39;login&#39; style=&#39;color: red;&#39;>登录</a>";  

</script>  </html>

第二种：使用innerHTML直接将元素添加到指定节点：

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title></title>  
    <script src="jquery-1.11.1.min.js"></script>  
    <script>  
    $(function(){  
    var $link=$(&#39;<a href="#" id="link" style="color:pink">登录</a>&#39;);  
        $(&#39;#main&#39;).append($link);  

    })  
    </script>  </head>  <body>  <p id="main"></p>  </body>  </html>

第三种：jQuery创建节点
jQuery中创建DOM对象，使用jQuery的工厂函数$()完成，格式如下：

$(html);

$(html)会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回.

jQuery中将创建的节点插入文本中，使用append()等方法

jQuery中插入节点方法有：

1.append():向每个匹配的元素内部追加内容

2.appendTo():将所有匹配的元素追加到指定元素中，颠倒了常规的$(A).append(B)方法，不是将B追加到A中，而是将A追加到B中

3.prepend()方法：向每个匹配的元素内部前置内容

4.prependTo():将所有匹配的内容前置到指定的元素中，与prpend()方法颠倒

5.after() 向每个匹配的元素之后插入内容

6.insertAfter()将所有匹配的元素插入到指定元素的后面,与after()方法颠倒

7.before()在每个匹配的元素之前插入内容

8.insertBefore()将每个匹配的元素插入到指定内容之前，与before() 2 番目のタイプ: innerHTML を使用して、指定したノードに要素を直接追加します:
    //使用createElement创建元素
    var dialog = document.createElement(&#39;p&#39;);    
    var img = document.createElement(&#39;img&#39;);    
    var btn = document.createElement(&#39;input&#39;);    
    var content = document.createElement(&#39;span&#39;);    // 添加class
    dialog.className = &#39;dialog&#39;;    // 属性
    img.src = &#39;close.gif&#39;;    // 样式
    btn.style.paddingRight = &#39;10px&#39;;    // 文本
    span.innerHTML = &#39;您真的要GG吗？&#39;;    // 在容器元素中放入其他元素
    dialog.appendChild(img);
    dialog.appendChild(btn);
    dialog.appendChild(span);

3 番目のタイプ: jQuery ノードを作成します

jQuery で DOM オブジェクトを作成し、 jQuery のファクトリー関数 $() を使用すると、形式は次のようになります:

$(html);

$(html) は、以下に基づいて DOM オブジェクトを作成します。渡された HTML マークアップ文字列。この DOM オブジェクトは jQuery オブジェクトにパッケージ化されて返されます。

作成したノードを jQuery のテキストに挿入し、`append() などのメソッドを使用します。`

jQuery のノードの挿入メソッドには以下があります:

1.append(): 一致する各要素にコンテンツを追加します

2.appendTo() code>: B を A に追加し、A を B に追加する代わりに、従来の <code>$(A).append(B) メソッドを逆にして、指定された要素に一致するすべての要素を追加します3. > prepend() メソッド: 一致する各要素の先頭にコンテンツを追加します

4.prependTo(): prpend() と同様に、一致するすべてのコンテンツを指定された要素の先頭に追加しますcode>メソッドは逆です 
5.after()一致した各要素の後にコンテンツを挿入します
6.insertAfter()一致するすべての要素を挿入します要素は、指定された要素。これは after() メソッドで反転されます

7.before()一致する各要素の前にコンテンツを挿入します
🎜8.insertBefore() は、指定されたコンテンツの前に一致する各要素を挿入します。これは before() メソッドで反転されます🎜🎜
var popContent =[ 
&#39;<li class="monitory-point-li" indexcode="00000000001310013631">&#39;, 
&#39;&#39;, 
&#39;&#39;+formedName+&#39;&#39;, 
&#39;</li>&#39;
 ].join(&#39; &#39;);
$(&#39;.document&#39;).append(popContent);
🎜🎜JavaScript は HTML 要素を動的に追加します🎜🎜 主な代替手段は 2 つあります: 🎜1. DOM🎜

🎜2. HTML テンプレートを使用する🎜
var popContent = &#39;<li class="monitory-point-li" indexcode="00000000001310013631">&#39;+ 
&#39;&#39;+ 
&#39;&#39;+formedName+&#39;&#39;+ 
&#39;</li>&#39;;
$(&#39;.document&#39;).append(popContent);
rrreee🎜、またはこの記述方法を使用します🎜rrreee🎜関連する推奨事項: 🎜🎜🎜HTML 要素のクリックイベントを操作する詳細な説明🎜🎜🎜🎜🎜🎜

以上がHTML要素を動的に生成し、要素に属性を追加します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。