jQueryを使用せずにJavaScriptでappend(),before(),prepend(),append()を実装してみたい

###前提・実現したいこと
jQueryを使用せずにJavaScriptのみでappend(),before(),prepend(),append()を実装したいのですが、クリックするたびに要素を追加する機能の実装方法がわからなくて困っています。

現在は1度クリックするとappendの動きはできるが、2回目以降はクリックしても変化しない状態になる。
###該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<title></title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/base.css">
10<link rel="stylesheet" href="css/style.css">
11</head>
12<body>
13<div class="wrapper">
14    <div class="u-mbm btn" id="q4">q4</div>
15</div>
16</body>
17</html>

JavaScript
1
2<script type="text/javascript">
3    var q4 = document.getElementById("q4");                 
4
5    var p = document.createElement('span'),                 
6        q = document.createElement('span'),
7        r = document.createElement('span'),
8        s = document.createElement('span');
9
10    p.innerHTML = "要素前";
11    q.innerHTML = "要素後";
12    r.innerHTML = "前 ";
13    s.innerHTML = " 後";
14
15    function addText(){
16        var add_p = q4.parentNode.insertBefore(p, q4),
17            add_q = q4.parentNode.insertBefore(q, q4.nextElementSibling),
18            add_r = q4.insertBefore(r, q4.firstChild),
19            add_s = q4.appendChild(s, q4);
20
21        add_p.appendChild(p);
22        add_q.appendChild(q);
23        add_r.appendChild(r);
24        add_s.appendChild(s);
25    }
26
27    q4.onclick = function(){
28        addText();
29    }
30</script>

appendChildを使用するのかなというイメージはあるのですが、どのように実装すればいいのかがまだよくわかりません。アドバイスお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

「DOM Parsing and Serialization」規定の Element#insertAdjacentHTML が正にそれだと思います。

HTML
1<p id="sample">sample</p>
2
3<script>
4'use strict';
5function append (element, text) {
6  element.insertAdjacentHTML('beforeend', text);
7}
8
9function before (element, text) {
10  element.insertAdjacentHTML('beforebegin', text);
11}
12
13function prepend (element, text) {
14  element.insertAdjacentHTML('afterbegin', text);
15}
16
17var p = document.getElementById('sample');
18append(p, ' <strong>append</strong>')
19before(p, ' <strong>before</strong>')
20prepend(p, ' <strong>prepend</strong>')
21</script>

Re: peishun さん

投稿2016/04/14 14:41

think49

総合スコア18162

append,before,prependそれぞれの機能を分けて考えてみると良いのでは？

html
1<!doctype html>
2<html>
3<body>
4<div id="target_id1">1</div>
5<div id="target_id2">2</div>
6<div id="target_id3">3</div>
7<div id="q4">q4</div>
8</body>
9</html>

javascript
1//append
2var append = function(str) {
3  var elm      = document.getElementById('target_id1')
4    , elmChild = document.createElement('div');
5  elmChild.innerHTML = str;
6  elm.appendChild(elmChild);
7}
8
9//prepend
10var prepend = function(str) {
11  var elm      = document.getElementById('target_id2')
12    , elmChild = document.createElement('div');
13  elmChild.innerHTML = str;
14  elm.insertBefore(elmChild, elm.firstChild);
15}
16
17//before
18var before = function(str) {
19  var elm = document.getElementById('target_id3')
20    , div = document.createElement('div');
21  div.innerHTML = str;
22  elm.parentNode.insertBefore(div, elm);
23}
24
25var addText = function(cnt){
26  append('appendContent' + cnt);
27  prepend('prependContent' + cnt);
28  before('beforeContent' + cnt);
29}
30
31var cnt = 0
32  , q4  = document.getElementById("q4");
33q4.onclick = function(){
34  addText(++cnt);
35}