質問: かなり初歩的なことですが、以下お答えいただけたらと思います ←ここに上で作成したcanvasを追加したい 以上のようにdiv要素が読み込まれたらcanvasを作成するとしていますが、この作成したcanvasを このdivタグの中に追加するにはどうしたら良いでしょうか? jsでgetElementByIdしてappendChildではなく、html内で完結できるのが好ましいです。 追記 今回やりたいのが、DOMの配置が終わったと同時にcanvasを作成して追加までになります。 divにid指定をしても、DOM配置前になるので、appendできないかと思ってます。(違ってたら言ってください・・)
回答: > > canvasを作成して、そのcanvasを子要素に追加する方法 > > > JavaScriptを使って書きます。 一例: ``` ``` `canvas#canvas-id` が `div#canvas-wrapper`の子要素として増えているはずです。 * getElementById()、appendChild() という古くからある実装を使わない。 * querySelector()、append() というモダンな実装を使う。 (ご質問に示された要件) マークアップ文書に変化を与える方法は次の2つです。 1. サーバー側で動的に書き上げ、ブラウザでは変化させない。(ガラケーのサイトなど) 2. JavaScriptを使いDOM操作し、ブラウザ上で変化させる。(モダンなウェブサイト) 「html内で完結するできるのが好ましい」の意図がよくわかりませんが、動的にHTMLを書く方法は限られているので、自分の要件に合うものを選んで利用します。 ※ ガラケーだけでなく、JavaScript が危険視されていた時代は、普通のウェブサイトもサーバー側でHTMLを書き上げて、CSSやGIFアニメだけで動的な表現を行っていました。 ちなみに、ご質問に示されている `div[onload]` は、当方の環境(モダンブラウザ)では発火しませんでした。 以下、手元でテストしたコードです。 ``` ``` ``` ``` > > ここに上で作成したcanvasを > > > 上記テスト結果から、「Canvasは作成できない」ことが確認できます。 **〜できるのが好ましい**と感じた場合、実現できる/できないは、利用者の(ブラウザなど)実行環境次第です。 閲覧者の環境を想定して、テスト環境を用意し、確認する必要があります (ブラウザの場合は開発者コンソールを開いた状態でリロードすると確認できます)。