素のJSで，要素を挿入

Question

###素のJSで複数要素を挿入したい

--- やりたいこと ---
あるcssクラスの1番目の子孫要素を取得して，
あるcssクラスの2番目以降の要素にコピーしたい

--- 試したこと ---

<dl>
    <dt>DEFAULT FONT of your browser</dt>
    <dd class="jsDdExample"></dd>
    <dd class="jsDdChars">
        <p>A B C Ć Č D Đ E F G H I J K L M N O P Q R S Š T U V W X Y Z Ž</p>
        <p>a b c č ć d đ e f g h i j k l m n o p q r s š t u v w x y z ž</p>
        <p>А Б В Г Ґ Д Ђ Е Ё Є Ж З Ѕ И І Ї Й Ј К Л Љ М Н Њ О П Р С Т Ћ У Ў Ф Х Ц Ч Џ Ш Щ Ъ Ы Ь Э Ю Я</p>
        <p>а б в г ґ д ђ е ё є ж з ѕ и і ї й ј к л љ м н њ о п р с т ћ у ў ф х ц ч џ ш щ ъ ы ь э ю я</p>
        <p>Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω</p>
        <p>α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω</p>
        <p>ά Ά έ Έ έ Ή ί ϊ ΐ Ί ό Ό ύ ΰ ϋ Ύ Ϋ Ώ Ă Â Ê Ô Ơ Ư ă â ê ô ơ ư</p>
        <p>1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / &amp; &lt; - + ÷ × = &gt; ® © $ € £ ¥ ¢ : ; , . *</p>
    </dd>

    <dt class="ff-Ferrum">Ferrum</dt>
    <dd class="ff-Ferrum jsDdExample"></dd>
    <dd class="ff-Ferrum jsDdChars"></dd>
    
    <dt class="ff-Roboto">Roboto</dt>
    <dd class="ff-Roboto jsDdExample"></dd>
    <dd class="ff-Roboto jsDdChars"></dd>
</dl>
		
<script>
    var js_ddChars= document.getElementsByClassName('jsDdChars');
    for(var i = 1, len = js_ddChars.length; i <= len; i++){
        js_ddChars.item(i).innerHTML = js_ddChars.item(0).children;
    }
</script>

--- 問題 ---
実行すると，<dd class="jsDdChars"></dd>の中に，
"[object HTMLCollection]" の文字列が挿入されてしまう
（本当は<p>～</p>を入れたい）

--- 質問 ---
どうすれば，複数の要素を挿入できるか

Answer 1

テキストノードは不要ですかね？

var fragment = document.createDocumentFragment();
var js_ddChars = document.getElementsByClassName('jsDdChars');
for (var i = 0, len = js_ddChars[0].children.length; i < len; i++) {
  fragment.appendChild(js_ddChars[0].children[i].cloneNode(true));
}

for (i = 1, len = js_ddChars.length; i < len; i++) {
  js_ddChars[i].appendChild(fragment.cloneNode(true));
}

Comments

[-1an.vvks-]

他の方のコードと比べ，こちらのコードは一見，冗長にも見えるのですが
要素を一度，fragmentに入れてから扱うときのメリットは何でしょうか？

[think49]

x_x さんではありませんが、
- XHTML でも使える
- 変更に強い (children, childNodes の切替が容易)
- innerHTML パーサを通さない生のノードが複製される

[-1an.vvks-]

「変更に強い」というのは，大きなメリットですね．
いずれ必要になると思うのでメモらせていただきました^^

[x_x]

あ、冗長ですか？
innerHTMLのない時代(HTML5前)にはこうだったんですよね。
未検証ですが、速度的にも速いかと思います。

Answer 2

全部の要素をコピーするのであれば下記のように考えましたが、部分的な選択の必要があるのでしょうか。

var js_ddChars= document.getElementsByClassName('jsDdChars');
for(var i = 1, len = js_ddChars.length; i < len; i++){
   js_ddChars.item(i).innerHTML = js_ddChars.item(0).innerHTML;
}

また、ループ条件のi <= lenは、配列のサイズを超えてしまうので、
i < lenとするとよいかと思います。

Comments

[-1an.vvks-]

>配列のサイズを超えてしまうので、i < lenとするとよいかと思います。

うっかりしてました！修正しときます><

Answer 3

var js_ddChars= document.getElementsByClassName('jsDdChars');
for(var i = 1; i < js_ddChars.length; i++){
  var n=js_ddChars[0].firstChild;
  while(n){
    js_ddChars[i].appendChild(n.cloneNode(true));
    n=n.nextSibling;
  }
}

Comments

[-1an.vvks-]

nextSibling初めて知りました，勉強になります！

ところで，あえてwhile文を使っているのはなぜでしょうか？