canvasを作成して、そのcanvasを子要素に追加する方法

かなり初歩的なことですが、以下お答えいただけたらと思います

<div onload="createCanvas(id)"> <canvas id=id></canvas> ←ここに上で作成したcanvasを追加したい </div>

以上のようにdiv要素が読み込まれたらcanvasを作成するとしていますが、この作成したcanvasを
このdivタグの中に追加するにはどうしたら良いでしょうか？

jsでgetElementByIdしてappendChildではなく、html内で完結できるのが好ましいです。

追記
今回やりたいのが、DOMの配置が終わったと同時にcanvasを作成して追加までになります。
divにid指定をしても、DOM配置前になるので、appendできないかと思ってます。（違ってたら言ってください・・）

kei344

2020/05/25 09:03

HTML/JavaScriptのコード全体を提示してください。

miyabi_pudding

2020/05/25 11:08

> divにid指定をしても、DOM配置前になるので、appendできないかと思ってます。なぜそうなるのでしょうか？ bodyの前行のheadでjsを実行してるから、とかでしょうか？それであれば、DOMツリーが生成されてからJSを実行する方法もありますし、だいたい、今のトレンドは、</body>の直前にJSを配置する方法です。（そうすれば、そもそもbodyが読み込まれた後にJSを実行できる）

行動規範の内容に同意します

回答1件

ベストアンサー

canvasを作成して、そのcanvasを子要素に追加する方法

JavaScriptを使って書きます。

一例：

html
1<div id="canvas-wrapper"></div>
2<script>
3document.querySelector("#canvas-wrapper")
4  .append( 
5    Object.assign( document.createElement("canvas"), {id:"canvas-id"} )
6  );
7</script>

canvas#canvas-id が div#canvas-wrapperの子要素として増えているはずです。

getElementById()、appendChild() という古くからある実装を使わない。
querySelector()、append() というモダンな実装を使う。

（ご質問に示された要件）

マークアップ文書に変化を与える方法は次の２つです。

サーバー側で動的に書き上げ、ブラウザでは変化させない。（ガラケーのサイトなど）
JavaScriptを使いDOM操作し、ブラウザ上で変化させる。（モダンなウェブサイト）

「html内で完結するできるのが好ましい」の意図がよくわかりませんが、動的にHTMLを書く方法は限られているので、自分の要件に合うものを選んで利用します。

※ ガラケーだけでなく、JavaScript が危険視されていた時代は、普通のウェブサイトもサーバー側でHTMLを書き上げて、CSSやGIFアニメだけで動的な表現を行っていました。

ちなみに、ご質問に示されている div[onload] は、当方の環境（モダンブラウザ）では発火しませんでした。

以下、手元でテストしたコードです。

html
1<div onload="createCanvas()"></div>
2<script>
3function createCanvas() {
4  console.log("onload div element") // 不発
5}
6</script>

html
1<div id="test"></div>
2<script>
3    elm = document.createElement("div");
4    elm.onload= function(){
5      console.log("onload div element") // 不発
6    };
7    document.getElementById("test").appendChild( elm );
8</script>