JavaScript createElement関数でhtmlタグ要素を作成する

2023年8月13日

環境
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>

JavaScript

Posted by arkgame

関連記事: