質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    16480questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4029questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2077questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

素のJSで,要素を挿入

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 315

-1an.vvks-

score 61

素の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>を入れたい)

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

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

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));
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/06 23:55

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

    キャンセル

  • 2017/10/07 17:34 編集

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

    キャンセル

  • 2017/10/07 22:52

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

    キャンセル

  • 2017/10/10 15:24

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

    キャンセル

+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とするとよいかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/06 23:47

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

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

    キャンセル

+1

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;
  }
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/06 23:50

    nextSibling初めて知りました,勉強になります!

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16480questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4029questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2077questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。