この記事では主に HTML 要素の動的生成と要素への属性の追加について説明します。必要な方は参考にしてください。
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('a'); link.setAttribute('href','#'); link.setAttribute('id','login'); link.style.color = 'green'; link.innerHTML = '登录'; var main = document.getElementById('main'); 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('a'); //使用innerHTML将元素直接添加到指定节点 main.innerHTML = "<a href='#' id='login' style='color: red;'>登录</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=$('<a href="#" id="link" style="color:pink">登录</a>'); $('#main').append($link); }) </script> </head> <body> <p id="main"></p> </body> </html>
第三种:jQuery
创建节点
jQuery中创建DOM对象,使用jQuery的工厂函数$()
完成,格式如下:
$(html);
$(html)
会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery
对象后返回.
jQuery中将创建的节点插入文本中,使用append()
等方法
jQuery中插入节点方法有:
3 番目のタイプ: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('p'); var img = document.createElement('img'); var btn = document.createElement('input'); var content = document.createElement('span'); // 添加class dialog.className = 'dialog'; // 属性 img.src = 'close.gif'; // 样式 btn.style.paddingRight = '10px'; // 文本 span.innerHTML = '您真的要GG吗?'; // 在容器元素中放入其他元素 dialog.appendChild(img); dialog.appendChild(btn); dialog.appendChild(span);ログイン後にコピー
jQuery
ノードを作成します $()
を使用すると、形式は次のようになります: $(html);$(html)
は、以下に基づいて DOM オブジェクトを作成します。渡された HTML マークアップ文字列。この DOM オブジェクトは jQuery
オブジェクトにパッケージ化されて返されます。
append() などのメソッドを使用します。
jQuery のノードの挿入メソッドには以下があります:
1.
append()
: 一致する各要素にコンテンツを追加します2.
appendTo()</ code>: B を A に追加し、A を B に追加する代わりに、従来の <code>$(A).append(B)
メソッドを逆にして、指定された要素に一致するすべての要素を追加します3.> prepend()
メソッド: 一致する各要素の先頭にコンテンツを追加します4.
6.prependTo()
:prpend()</ と同様に、一致するすべてのコンテンツを指定された要素の先頭に追加しますcode>メソッドは逆です<br/></p>5.<code>after()
一致した各要素の後にコンテンツを挿入しますinsertAfter()
一致するすべての要素を挿入します要素は、指定された要素。これはafter()
メソッドで反転されます🎜8.< code>insertBefore()< /code> は、指定されたコンテンツの前に一致する各要素を挿入します。これは
7.before()
一致する各要素の前にコンテンツを挿入しますbefore()
メソッドで反転されます🎜🎜🎜🎜JavaScript は HTML 要素を動的に追加します🎜🎜 主な代替手段は 2 つあります: 🎜1. DOM🎜var popContent =[ '<li class="monitory-point-li" indexcode="00000000001310013631">', '<span class="checkbox-unchecked"></span>', '<span class="monitory-text" title="'+name+'">'+formedName+'</span>', '</li>' ].join(' '); $('.document').append(popContent);ログイン後にコピー🎜2. HTML テンプレートを使用する🎜<p class="se-preview-section-delimiter"></p>ログイン後にコピーrrreee🎜、またはこの記述方法を使用します🎜rrreee🎜関連する推奨事項: 🎜🎜🎜HTML 要素のクリック イベントを操作する詳細な説明🎜🎜🎜🎜🎜🎜var popContent = '<li class="monitory-point-li" indexcode="00000000001310013631">'+ '<span class="checkbox-unchecked"></span>'+ '<span class="monitory-text" title="'+name+'">'+formedName+'</span>'+ '</li>'; $('.document').append(popContent);ログイン後にコピー以上がHTML要素を動的に生成し、要素に属性を追加します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。