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

回答編集履歴

1

追記

2015/07/20 06:55

投稿

ngyuki
ngyuki

スコア4516

answer CHANGED
@@ -1,6 +1,6 @@
1
1
  わかっていてやっている(=そういう仕様)なのなら良いのですが、innerHTML だと実体参照とかを解してしまうので、あくまでもテキストとして追加するなら `createTextNode` などを使う必要があります。
2
2
 
3
- ```javascript
3
+ ```lang-javascript
4
4
  function addText(){
5
5
  var text = document.createTextNode(document.getElementById('txt').value);
6
6
 
@@ -17,4 +17,30 @@
17
17
  }
18
18
  ```
19
19
 
20
- (こういうのは jQuery でやるほうがはるかに楽だと思います)
20
+ (こういうのは jQuery でやるほうがはるかに楽だと思います)
21
+
22
+ ---
23
+
24
+ 削除も動くようにするならこんな感じだと思います。
25
+
26
+ ```lang-javascript
27
+ function addText(){
28
+ var elem = document.createElement('div');
29
+
30
+ var text = document.createTextNode(document.getElementById('txt').value);
31
+
32
+ var input = document.createElement('input');
33
+ input.type = 'button';
34
+ input.value = '削除';
35
+ input.onclick = function () {
36
+ elem.parentNode.removeChild(elem);
37
+ };
38
+
39
+ elem.appendChild(text);
40
+ elem.appendChild(input);
41
+
42
+ document.getElementById('show').appendChild(elem);
43
+ }
44
+ ```
45
+
46
+