teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

2018/10/30 00:34

投稿

tuyopo
tuyopo

スコア10

title CHANGED
File without changes
body CHANGED
@@ -15,9 +15,7 @@
15
15
  <!DOCTYPE html>
16
16
  <html>
17
17
  <head>
18
- <mata charset="utf-8">
19
18
  <title>練習</title>
20
- <link rel=stylesheet href="css/practice.css">
21
19
  </head>
22
20
 
23
21
  <body>
@@ -32,40 +30,11 @@
32
30
  <input type="button" id="cancel" value="キャンセル"></button>
33
31
  </div>
34
32
 
35
- <div id="newElem" style="width:300px;">
33
+ <div id="newA" style="width:300px;">
36
34
  </div>
37
35
  <div>
38
36
  <input type="button" id="btn" value="追加">
39
37
  </div>
40
-
41
- <script>
42
-
43
- var ok=document.getElementById("ok");
44
- var cancel=document.getElementById("cancel");
45
- var btn=document.getElementById("btn");
46
- currentNumber=0;
47
- btn.addEventListener('click',function(){
48
-
49
- currentNumber++;
50
- var div=document.createElement("div");
51
- div.innerHTML='<div style="border:1px solid #333;width:300px;height:200px;margin:10px;"><p>ユーザー名</p><input type="text"><p>備考</p><textarea></textarea><button id="ok">ok</button><button id="cancel">キャンセル</button></div>'
52
- div.setAttribute("name","item"+currentNumber);
53
- div.id="newarea";
54
- //div.setAttribute("id","newarea"+currentNumber);
55
- var parent=document.getElementById('newElem')
56
- parent.appendChild(div);
57
-
58
- dlt_btn=document.createElement('button');
59
- dlt_btn.innerHTML="×";
60
-
61
- div.insertBefore(dlt_btn,div.firstChild);
62
- dlt_btn.setAttribute("id","dlt"+currentNumber);
63
- dlt_btn.setAttribute("class","dltbtn");
64
- dlt_btn.addEventListener("click",function(){
65
- document.getElementById("newarea").remove()
66
- },false);
67
- },false);
68
- </script>
69
38
  </body>
70
39
  </html>
71
40
 

1

2018/10/30 00:34

投稿

tuyopo
tuyopo

スコア10

title CHANGED
@@ -1,1 +1,1 @@
1
- 要素を動的に追加・削除する
1
+ 動的にdivを追加する
body CHANGED
File without changes