JavaScriptでHTMLタグを動的に作成する方法例まとめ-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptでHTMLタグを動的に作成する方法例まとめ

伊谢尔伦

Jul 27, 2017 am 10:56 AM

html javascript js

HTML イベント属性

グローバルイベント属性: HTML 4 では、ユーザーが要素をクリックしたときに JavaScript を開始するなど、イベントがブラウザーでアクションをトリガーする機能が追加されています。

a. ウィンドウイベント属性。ウィンドウオブジェクトによってトリガーされるイベント ( タグに適用される) の場合、一般的に使用されるのは onload です。

b. フォームイベント、HTML フォーム内のアクションによってトリガーされるイベント (ほぼすべての HTML 要素に適用されますが、最も一般的にはフォーム要素で使用されます): 一般的に使用されるものは、onblur、onfocus、onselect、および onsubmit です。

c. キーボードイベント

d. マウスイベント、マウスまたは同様のユーザーアクションによってトリガーされるイベント: 一般的に使用されるものは、onclick、onmouseover、および onmouseout です。

e. メディアイベント、メディア (ビデオ、画像、オーディオなど) によってトリガーされるイベント (すべての HTML 要素に適用されますが、

HTML タグを動的に作成する

a. 2 つの従来のメソッド

document.write メソッドと innerHTML 属性、どちらも標準化された DOM (W3C 標準) でサポートされているメソッドと属性ではなく、どちらも HTML 専用のプロパティです。

document.write メソッドは、要素タグ、特に文字列を簡単に挿入できます。しかし、これは Web デザインが動作 (スクリプト) と構造 (HTML タグ) を分離するという原則に反します。

<!DOCTYPE html>
 <html>
 <head>
 <meta chaset="utf-8" />
 <title>document.write</title>
 <body>
  <script>
  <!--可以很方便的插入元素标签,尤其是字符串.但是它与网页设计应将行为(脚本)和结构(html标签)分离的原则-->
  document.write("<p>This is inserted by document.write</p>");
  </script>
 </body>
 </head>
 </html>

ログイン後にコピー

innerHTML は、次のような大きな HTML コンテンツを Web ページに挿入するのに適しています:

<p id="testp">
 </p>
 window.onload = function() {
 var testp = document.getElementById("testp");
 testp.innerHTML = "<p>This is inserted by <em>innerHTML</em></p><en>";
 }

ログイン後にコピー

ノードツリー

取得ノード(要素): document.getElementById および element.getElementsByTagName

ノード(要素)の作成: document.createElement,document.createTextNode

追加ノード(要素): element.appendChild

挿入(ノードを1つ挿入) :parentEelement.insertBefore(newElement, targetElement)

非常に便利な属性: element.parentNode (親ノードを取得)、element.nextSibling (兄弟ノードを取得)

上記の innerHTML 属性を使用して HTML を挿入した場合の効果dom メソッドを使用しても実現できます:

window.onload = function() {
 var testp = document.getElementById("testp");
 var para = document.createElement("p");
 testp.appendChild(para);
 var context1 = doument.createTextNode("This is inserted by ");
 para.appendChild(context1);
 var emphasis = document.createElement("em");
 para.appendChild(emphasis);
 var context2 = document.createTextNode("method of domcore");
 emphasis.appendChild(context2);
}

ログイン後にコピー

上記の dom メソッドを使用して、あるノードを別のノードの後に挿入する関数を作成します:

function insertAfter(newElement, targetElement) {
 var parent = targetElement.parentNode;
 if (parent.lastChild == targetElement) {
  parent.appendChild(newElement);
 } else {
  targetElement.inserBefore(newElement, targetElement.nextSibling);
 }
}