javascriptについて

Question

下記このような事をjavascriptで行いたいのですが、可能でしょうか。

HTMLに下記、３つの要素の文字列？値？をいれておいて、ページを読み込んだ際に、もし＜A＞があれば、Dソースを表示させる。ただ、
Dソースを表示させる際に、Dソースの中に変数＜B＞＜C＞があり、そこにはHTMLの中の＜B＞＜C＞の値を入れて表示させるようにしたいです。
このような事は可能でしょうか。

---------------HTML--------------
＜A＞＜B="H-0001"＞＜C="メロンパン"＞






---------------------------------

・Dソース
この商品ページは、"＜C＞"のぺーじです。
商品コードは、"＜B＞"です。



--------javascript適応後---------

この商品ページは、"メロンパン"のページです。
商品コードは、"H-0001"です。

Answer

ECマスターズの北原です。

>HTMLに下記、３つの要素の文字列？値？をいれておいて、ページを読み込んだ際に、
  もし＜A＞があれば、Dソースを表示させる。ただ、
>Dソースを表示させる際に、Dソースの中に変数＜B＞＜C＞があり、
  そこにはHTMLの中の＜B＞＜C＞の値を入れて表示させるようにしたいです。
>このような事は可能でしょうか。

Jqueryを使用しているかわからなかったため、
JavaScriptで作成させていただきました。





    
    



    
    
    
    

    
    
        この商品ページは、""のぺーじです。
        商品コードは、""です。
    

    

        var a_source = document.getElementById('a-source'); // Aソース取得
        // Aソースがあるとき
        if (a_source !== null) {
            var b_data = document.getElementById('b-data').dataset.code; // Bのデータ（商品コード）を取得
            var c_data = document.getElementById('c-data').dataset.name; // Cのデータ（商品名）を取得

            document.getElementById('b-text').innerText = b_data; // BのデータをDソース内に追加
            document.getElementById('c-text').innerText = c_data; // CのデータをDソース内に追加

            document.getElementById('d-source').style.display = 'block'; //最後にDソースを表示させる
        }
    




最初、A~Cをデータ群としてHTMLを記述します。
商品コードや商品名はdata属性を使用して受け渡しをします。

Dソースはあらかじめ非表示にし、
Aソースを取得できた時のみstyleを変更し、
表示に切り替えております。

お試しください。