JavaScript createElement関数でhtmlタグ要素を作成する
環境
Google Chrome 115.0.5790.171(Official Build) (64 ビット)
Windows 11 Pro 64bit
構文
document.createElement(tagName[, options]);
tagName
生成される要素の型を特定する文字列です。
生成される要素の nodeName は tagName の値で初期化されます。
option
省略可能な ElementCreationOptions オブジェクトで、
is という名前のプロパティをひとつ持ち、その値は前に customElements.define() を使用して定義したカスタム要素の名前です。
使用例
<!DOCTYPE html> <html> <body> <div id="cft"></div> <script> const els = document.createElement("img"); els.src = "/uploads/2023/08/001.png"; els.style.width = "40px"; els.style.height = "60px"; document.getElementById('cft').appendChild(els); </script> </body> </html>
実行結果
createElementを使用して、html要素を作成します。
コンソールにテキストが表示されます。
<div id="cft"> <img src="/uploads/2023/08/001.png" style="width: 40px; height: 60px;"> </div>