ホームページ > 記事 > ウェブフロントエンド > JavaScriptでHTMLタグを動的に作成する方法例まとめ
JavaScriptでHTMLタグを動的に作成する方法例まとめ
- 伊谢尔伦オリジナル
- 2017-07-27 10:56:521521ブラウズ
HTML イベント属性
グローバル イベント属性: HTML 4 では、ユーザーが要素をクリックしたときに JavaScript を開始するなど、イベントがブラウザーでアクションをトリガーする機能が追加されています。
a. ウィンドウ イベント属性。ウィンドウ オブジェクトによってトリガーされるイベント (6c04bd5ca3fcae76e30b72ad730ca86d タグに適用される) の場合、一般的に使用されるのは onload です。
b. フォーム イベント、HTML フォーム内のアクションによってトリガーされるイベント (ほぼすべての HTML 要素に適用されますが、最も一般的にはフォーム要素で使用されます): 一般的に使用されるものは、onblur、onfocus、onselect、および onsubmit です。
c. キーボード イベント
d. マウス イベント、マウスまたは同様のユーザー アクションによってトリガーされるイベント: 一般的に使用されるものは、onclick、onmouseover、および onmouseout です。
e. メディア イベント、メディア (ビデオ、画像、オーディオなど) によってトリガーされるイベント (すべての HTML 要素に適用されますが、b97864c2e0ef2353a16c4d64c7734e92、d8e2720730be5ddc9c2a3782839e8eb6、a1f02c36ba31691bcfe87b2722de723b などのメディア要素によく見られます) ;、、および )。
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);
}
}以上がJavaScriptでHTMLタグを動的に作成する方法例まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。