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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

4241閲覧

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

poppoas

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/05/25 08:54

編集2020/05/25 08:59

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

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/05/25 09:03

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

2020/05/25 11:08

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

回答1

0

ベストアンサー

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-iddiv#canvas-wrapperの子要素として増えているはずです。

(ご質問に示された要件)


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

  1. サーバー側で動的に書き上げ、ブラウザでは変化させない。(ガラケーのサイトなど)
  2. 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>

ここに上で作成したcanvasを

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

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

投稿2020/05/26 03:30

編集2020/05/26 20:35
AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

poppoas

2020/05/27 08:40

とても丁寧な回答ありがとうございます。 単純に<script>追加して、そこで子要素に追加してあげればよかったですね。。 div onloadが発火しないのはブラウザに依存してるものなんですかね。 私の環境でも発火しませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問