HTMLとCSSの挿入

HTMLの挿入 replaceHTML()

HTML文字列をまとめて挿入し、挿入したHTMLをDOM操作したい時の関数です。

前準備として、HTMLを挿入したい箇所に次のダミータグを記述します。(複数対応)

<script class="APPNAME"></script>

このダミータグが指定したHTMLに置換されます。(タグ名はscript以外も可)
クラス名で検索するので、replaceHTML()関数の第二引数にはクラス名を入れてください。

var html = function(){/*
ここにHTML文字列を記述する
*/}.toString().match(/\n([\s\S]*)\n/)[1];

replaceHTML(html, "APPNAME");


function replaceHTML(html, className){
    var option = [];
    var dummy = document.querySelectorAll("." + className);
    for(var i = dummy.length-1; i >= 0; i--){
        dummy[i].attr = {};
        for(var j = 0; j < dummy[i].attributes.length; j++){
            if(dummy[i].attributes.item(j).nodeValue) {
                var attrname = dummy[i].attributes.item(j).nodeName.replace(/^data-/i, "");
                dummy[i].attr[attrname] = dummy[i].attributes.item(j).nodeValue;
            }
        }
        dummy[i].attr.id = className + i;
        option.unshift(dummy[i].attr);

        dummy[i].insertAdjacentHTML('afterend', html);
        dummy[i].nextSibling.id = className + i;
        dummy[i].parentNode.removeChild(dummy[i]);
    }
    return option;
}

新規に挿入されたHTMLにはid属性が自動付与されます →「APPNAME＋0から始まる数字」 (APPNAMEは変更可)

戻り値は配列で、各要素には元タグの全属性＋idがオブジェクトの形で入っています。要素数は置換した数です。
上記の例だと、配列の0番目に {"class":"APPNAME", "id":"APPNAME0"} が入ります
これはHTMLからJavaScriptにデータを渡したいときに利用できます

var option = replaceHTML(html, "APPNAME");
for(var i = 0; i < option.length; i++){
    var dom = document.getElementById(option[i].id);
    //これで挿入したHTMLのDOM操作ができる
}

属性名が「data-」から始まっている場合は、名前の「data-」部分はカットします。(data属性)

HTMLの挿入 insertHTML()

ダミータグを使用せずHTMLを挿入する関数

1. 第1引数: HTML文字列
2. 第2引数: 挿入したい場所のDOM要素
3. 第3引数: 関係。"兄", "弟", "長男", "末っ子"のうちいずれか1つ

例えば、HTML文字列を「#where」の「長男」として挿入したい場合は次のようになります

insertHTML(html, document.getElementById("where"), "長男");

var html = function(){/*
ここにHTML文字列を記述する
*/}.toString().match(/\n([\s\S]*)\n/)[1];

function insertHTML(html, where, relation){
    var dummy = document.createElement("div");
    dummy.innerHTML = html;
    var dom = dummy.children;
    var num = dummy.children.length;
    var result = [];

    if(relation == "兄"){
        for(var i = 0; i < num; i++){
            result.push(where.parentNode.insertBefore(dom[0], where));
        }
    }
    else if(relation == "弟"){
        for(var i = num-1; i >= 0; i--){
            result.unshift(where.parentNode.insertBefore(dom[i], where.nextSibling));
        }
    }
    else if(relation == "長男"){
        for(var i = num-1; i >= 0; i--){
            result.unshift(where.insertBefore(dom[i], where.firstChild));
        }
    }
    else{ //末っ子
        for(var i = 0; i < num; i++){
            result.push(where.appendChild(dom[0]));
        }
    }
    return result;
}

戻り値は配列です。各要素には挿入したDOMが入っています

CSSの挿入 insertCSS()

cssをheadタグの一番後ろに挿入します

var css = function(){/*
ここにCSS文字列を記述する
*/}.toString().match(/\n([\s\S]*)\n/)[1];

insertCSS(css);


function insertCSS(css){
    var style = document.createElement("style");
    style.innerHTML = css;
    document.head.appendChild(style);
}