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

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

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

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

Q&A

解決済

1回答

382閲覧

Javascriptで動的にDOMを生成したい

saki1214

総合スコア36

JavaScript

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

0グッド

0クリップ

投稿2019/08/10 03:15

動的に以下のような<div>要素を作りたいです。
あらかじめ用意した<div id="result">の中に、
タイトルテキストがあって、次にリンクがついた文字列とリンクが付いた画像を配置し、これらを一つの<div>にしたいです。

<div id="result"> <div> タイトル<br> <a href="www.xxx.com">リンク</a><br> <a href="www.xxx.com"> <img src="aaa.jpg" /> </a> </div> </div>

下のようなJavaScriptを考えましたが、

<div>タイトル</div>のように、<div>がタイトルだけにかかりうまくいきません。
var element = document.createElement("div"); var list = document.getElementById("result").appendChild(element); list.textContent ="タイトル"; var imageURL = "xxxxxx" const imgae = document.createElement("a"); document.getElementById("result").appendChild(imgae).innerHTML = "<img src ="+imageURL+">"; var el_a = document.createElement("a"); el_a.setAttribute("href", URL); el_a.appendChild(imgae); document.getElementById("result").appendChild(el_a);

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

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

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

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

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

m.ts10806

2019/08/10 06:22

「動的」とは仰いますが、そのトリガーは何でしょうか? 提示したコードだと固定値で静的に作っているようにしか見えません
guest

回答1

0

ベストアンサー

html

1<div id="result"> 2 <div> 3 タイトル<br /> 4 <a href="#">リンク</a><br /> 5 <a href="#"> 6 <img src="s.jpg" /> 7 </a> 8 </div> 9</div> 10<script> 11var element = document.createElement("div"); 12var list = document.getElementById("result").appendChild(element); 13var imageURL = "s.jpg"; 14var image = document.createElement("img"); 15var el_a = document.createElement("a"); 16list.innerHTML = "タイトル<br>"; 17image.src = imageURL; 18el_a.setAttribute("href", imageURL); 19el_a.appendChild(image); 20list.appendChild(el_a); 21</script>

投稿2019/08/10 04:31

yasutomi

総合スコア2937

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

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

saki1214

2019/08/10 06:23

いただいたコードをもとに以下のようにして解決できました。 var element = document.createElement("div"); var list = document.getElementById("result").appendChild(element); list.innerHTML = title + "<br>"; var el_a2 = document.createElement("a"); el_a2.innerHTML = "リンク" + "<br>"; el_a2.setAttribute("href", "www.co.jp"); list.appendChild(el_a2); var image = document.createElement("img"); var el_a = document.createElement("a"); image.src = imageURL; el_a.setAttribute("href", "xxx.co.jp"); el_a.setAttribute('target', '_blank'); el_a.appendChild(image); list.appendChild(el_a);
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問