質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.12%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 155

poppoas

score 12

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

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2020/05/25 18:03

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

    キャンセル

  • miyabi_takatsuk

    2020/05/25 20:08

    > divにid指定をしても、DOM配置前になるので、appendできないかと思ってます。

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

    キャンセル

回答 1

checkベストアンサー

+1

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

JavaScriptを使って書きます。

一例:

<div id="canvas-wrapper"></div>
<script>
document.querySelector("#canvas-wrapper")
  .append( 
    Object.assign( document.createElement("canvas"), {id:"canvas-id"} )
  );
</script>

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


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

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

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

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


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

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

<div onload="createCanvas()"></div>
<script>
function createCanvas() {
  console.log("onload div element") // 不発
}
</script>
<div id="test"></div>
<script>
    elm = document.createElement("div");
    elm.onload= function(){
      console.log("onload div element") // 不発
    };
    document.getElementById("test").appendChild( elm );
</script>

ここに上で作成したcanvasを

上記テスト結果から、「Canvasは作成できない」ことが確認できます。

〜できるのが好ましいと感じた場合、実現できる/できないは、利用者の(ブラウザなど)実行環境次第です。
閲覧者の環境を想定して、テスト環境を用意し、確認する必要があります
(ブラウザの場合は開発者コンソールを開いた状態でリロードすると確認できます)。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/05/27 17:40

    とても丁寧な回答ありがとうございます。
    単純に<script>追加して、そこで子要素に追加してあげればよかったですね。。

    div onloadが発火しないのはブラウザに依存してるものなんですかね。
    私の環境でも発火しませんでした。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる