【js】prependで挿入したタグがそのまま出力される

  • 解決済 d.w.c

    (@dwc-1)


    8年、 2ヶ月前

    絞り込み検索でチェックしているものを別枠に即表示させたい
    で相談して動くようになったjsにつての質問です。

    いくつかの改造を追加して、jsの中にこういう記述をしています。

        var $post_tag_language = document.getElementsByClassName("post_tag_language");
    var $Output_language = document.getElementById( "Output_language" );
    
    if (($post_tag_language != null) && ($Output_language != null)) { $Output_language.innerHTML = ''; 
        for(var $i = 0; $i<$post_tag_language.length;$i++) { 
            if($post_tag_language[$i].checked) {
                $Output_language.innerHTML += $post_tag_language[$i].value + ' ';
            }else{
                //何もしない
            }
        }
        if ($Output_language.innerHTML != '') { $Output_language.prepend("<h3>Here!</h3>");}//出力先に文字があれば表示
    }

    この最後のところにある$Output_language.prepend("<h3>Here!</h3>");なんですが、
    希望のタイミングで希望の場所にHere!の文字を出すことはできたのですが、
    <h3>タグが適用されず、プレーンテキストとして<h3>Here!</h3>というテキストが挿入されてしまいます。

    chromeのデベロッパーツールで調べたら下記のコードになっていました。(japanese englishは$Output_language.innerHTML += $post_tag_language[$i].value + ' ';で自動挿入されたテキストです。)

    <span id="Output_language">
    "<h3>Here!</h3>"
    "japanese english "
</span>

    質問１．
    <h3>をテキストではなくタグとして扱うにはどう書き換えればいいでしょうか？

    質問２

    <div>
    <h3>Here!</h3>
    <span id="Output_language">
        "japanese english "
    </span>
</div>

    という風に、<span id="Output_language"></span>を<div>で囲いつつ、<span>の前に<h3>を挿入したいです。
    $Output_language.wrap("<div>");と書くと$Output_language.wrap is not a functionのエラーが吐き出されます。

    <h3>の挿入についてはそれほど重要ではないのですが、
    <span>を<div>で囲うのは実装したいです。どう記述すればいいでしょうか？

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • LABE

    (@latobeam)

    8年、 2ヶ月前

    ほとんどWordPressには関係ない事象ですので、あまりこのフォーラムでは適切でないかもしれませんが……

    .prepend や .wrap はjQueryのメソッドですが、 $Output_language は生JSのオブジェクトなので、うまく動かないのではないかと。
    偶然か、 .prepend は生JSにも存在するので、文字列の追加だけはできたのでしょう。
    一方、 .wrap は生JSには存在しない関数とみなされたようです。
    var $Output_language = $('#Output_language'); と、jQueryで取得するのではだめでしょうか。

    要素を <span> の中ではなく、直前（外側）に追加するには .prepend ではなく .before を使います。
    しかし、そもそも外側の <div> をHTMLに書いておき、それに id="Output_language" を付け、その内側にJSで <h3> や <span> を追加するほうがスマートかと思います。
    その場合、 <h3> や <span> は .append で追加していくことになります。

    トピック投稿者 d.w.c

    (@dwc-1)

    8年、 2ヶ月前

    単純にvar $Output_language = document.getElementById( "Output_language" );をvar $Output_language = $('#Output_language');に差し替えてみましたが、その場合はエラー$ is not a functionとなって動かないようです。

    jsを使って<div>を挿入したかったのは、出力先の中身が空の場合は項目表示欄自体を表示させたくなかったからなのですが、
    最初から<div>をhtmlで書いておいてdisplay: none;などで調整すればいいことに今になって気が付きました。
    その方向で頑張ってみたところ、下記の感じでできました。

    [js]
    var $post_tag_language = document.getElementsByClassName("post_tag_language");
    var $Output_language = document.getElementById( "Output_language" );
    var $Output_language_wrap = document.getElementById( "Output_language_wrap" );
    
    if (($post_tag_language != null) && ($Output_language != null)) { $Output_language.innerHTML = ''; 
        for(var $i = 0; $i<$post_tag_language.length;$i++) { 
            if($post_tag_language[$i].checked) {
                $Output_language.innerHTML += $post_tag_language[$i].value + ' ';
            }else{
                //何もしない
            }
        }
        if ($Output_language.innerHTML != '') {
            $Output_language_wrap.className="checked";
        } else {
            $Output_language_wrap.className="blank";
        }
    }
    
[HTML]
<div id="sOutput">
	<div id="Output_language_wrap">
		<h3>Here!</h3>
		<span id="Output_language"></span>
	</div>
</div>
    
[CSS]
#sOutput .blank {
	display: none;
}
#sOutput .checked {
	display: block;
}

    前スレ「絞り込み検索でチェックしているものを別枠に即表示させたい」の方にいただいた、呼び出した時の表示名の変更についてはこのあと試させていただきます。

    jsについての質問掲示板などでお勧めの場所があれば教えていただけると幸いです。
    ありがとうございます。

    • この返信は8年、 2ヶ月前にd.w.cが編集しました。
    • この返信は8年、 2ヶ月前にd.w.cが編集しました。
    • この返信は8年、 2ヶ月前にd.w.cが編集しました。
    LABE

    (@latobeam)

    8年、 2ヶ月前

    .wrap などをお使いなのでjQueryをご利用なのかと思ってそのように提案させていただきましたが、そもそもjQueryをご利用ではなかったのですね。
    ともかく、解決されたようで何よりです。
    外部の掲示板などの紹介は差し控えたいと思います。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「【js】prependで挿入したタグがそのまま出力される」には新たに返信することはできません。