こうできたらいいなというものがあり、投稿しました。 ▼html <ul> [ここに生成されたhtmlが吐き出される] </ul>

JavaScript | HTML、CSS27閲覧

ベストアンサー

1

1人がナイス!しています

ThanksImg質問者からのお礼コメント

ありがとうございます!! 1番イメージに近いもので、助かりました。 参考にさせていただきます!

お礼日時:7/23 13:04

その他の回答(2件)

1

<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> クラス名:<input type="text" class="class"> 画像パス:<input type="text" class="img"><br> テキスト1:<input type="text" class="txt1"> テキスト2:<input type="text" class="txt2"><br> HTML:<input type="text" class="html" size="50px"><br> <input type="button" value="追加" class="btn"><br> <ul class="ul"> </ul> <script> className = document.querySelector('.class'); imgPass = document.querySelector('.img'); text1 = document.querySelector('.txt1'); text2 = document.querySelector('.txt2'); html = document.querySelector('.html'); btn = document.querySelector('.btn'); btn.addEventListener('click', inHTML); function inHTML() { ulElement = document.querySelector('.ul'); liElement = document.createElement('li'); liElement.classList.add(className.value); ulElement.appendChild(liElement); imgElement =document.createElement('img'); imgElement.setAttribute('src', imgPass.value); imgElement.setAttribute('alt', ""); liElement.appendChild(imgElement); p1Element = document.createElement('p'); p1Element.textContent = text1.value; p2Element = p1Element.cloneNode(true); p2Element.textContent = text2.value; liElement.appendChild(p1Element); liElement.appendChild(p2Element); liElement.innerHTML += html.value; } </script> </body> </html>

1人がナイス!しています

1

ご期待に沿うものかわかりませんが、 HTML5には、templateタグなるものがあります。 『templateタグ』で検索していただけたら色々出てきます。 このタグは他にJavaScriptの知識も必要になります。

1人がナイス!しています

追記として、 そのページで文字列を追加したら、 ページを更新しなくても追加されるというものであれば、 JavaScriptでイベントを発火させるしか無いでしょうかね。 参考までに。