teratail
回答率
85.30%
質問するログイン新規登録
トップJavaScriptに関する質問insertAdjacentHTMLで追加した文字にcssが効かない

編集履歴

質問編集履歴

2

文法の修正

2022/08/10 05:44

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -11,7 +11,7 @@
11
11
  ### 該当のソースコード
12
12
 
13
13
 
14
- ```HTML, JavaScript
14
+ ```JavaScript
15
15
  <!DOCTYPE html>
16
16
  <html lang="ja">
17
17
 
JavaScript

1

コード挿入タグを使い忘れました

2022/08/10 05:27

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,62 +1,63 @@
1
- ### 前提・実現したいこと
2
-
3
- Twitterみたいな掲示板を作成しています。
4
- ボタンを押したら投稿がどんどん追加される仕様です。
5
- 投稿した文字のフォントサイズやカラーを変更したいです。
6
-
7
-
8
- ### 発生している問題・エラーメッセージ
9
- <p class="text">に投稿を追加したいのですが、できません。
10
-
11
- ### 該当のソースコード
12
-
13
- HTML, JavaScript
14
-
15
-
16
- <!DOCTYPE html>
17
- <html lang="ja">
18
-
19
- <head>
20
- <meta charset="utf-8">
21
-
22
- </head>
23
-
24
- <body>
25
-
26
- <p class="text" style="font-size:2rem">かきくけこ</p>
27
-
28
- <form>
29
- <textarea class="textareaField" placeholder="入力欄"></textarea>
30
- </form>
31
-
32
- <button class="btn">ボタン</button>
33
-
34
-
35
- <script>
36
- const btn = document.querySelector(".btn");
37
-
38
- btn.addEventListener("click", function() {
39
-
40
- const text =document.querySelector(".text");
41
- const textareaField = document.querySelector(".textareaField");
42
- const textareaFieldValue = textareaField.value;
43
-
44
- text.insertAdjacentHTML('afterend', textareaFieldValue);
45
-
46
- });
47
- </script>
48
-
49
- </body>
50
-
51
-
52
-
53
-
54
- ### 試したこと
55
-
56
- text.innerHTML = textareaField.value;
57
- とすると<p class="text">に挿入されますが
58
- Twitterみたいに投稿できません
59
-
60
- ### 補足情報（FW/ツールのバージョンなど）
61
-
1
+ ### 前提・実現したいこと
2
+
3
+ Twitterみたいな掲示板を作成しています。
4
+ ボタンを押したら投稿がどんどん追加される仕様です。
5
+ 投稿した文字のフォントサイズやカラーを変更したいです。
6
+
7
+
8
+ ### 発生している問題・エラーメッセージ
9
+ <p class="text">に投稿を追加したいのですが、できません。
10
+
11
+ ### 該当のソースコード
12
+
13
+
14
+ ```HTML, JavaScript
15
+ <!DOCTYPE html>
16
+ <html lang="ja">
17
+
18
+ <head>
19
+ <meta charset="utf-8">
20
+
21
+ </head>
22
+
23
+ <body>
24
+
25
+ <p class="text" style="font-size:2rem">かきくけこ</p>
26
+
27
+ <form>
28
+ <textarea class="textareaField" placeholder="入力欄"></textarea>
29
+ </form>
30
+
31
+ <button class="btn">ボタン</button>
32
+
33
+
34
+ <script>
35
+ const btn = document.querySelector(".btn");
36
+
37
+ btn.addEventListener("click", function() {
38
+
39
+ const text =document.querySelector(".text");
40
+ const textareaField = document.querySelector(".textareaField");
41
+ const textareaFieldValue = textareaField.value;
42
+
43
+ text.insertAdjacentHTML('afterend', textareaFieldValue);
44
+
45
+ });
46
+ </script>
47
+
48
+ </body>
49
+
50
+ ```
51
+
52
+
53
+
54
+
55
+ ### 試したこと
56
+
57
+ text.innerHTML = textareaField.value;
58
+ とすると<p class="text">に挿入されますが
59
+ Twitterみたいに投稿できません
60
+
61
+ ### 補足情報（FW/ツールのバージョンなど）
62
+
62
63
  ここにより詳細な情報を記載してください。
JavaScript
JavaScript