質問

私は純粋なJavaScriptでライトボックスを作成しています。そのために、私はオーバーレイを作っています。私はこのオーバーレイをボディに追加したいのですが、ページのコンテンツも維持したいのです。私の現在のコードは、オーバーレイの div を追加しますが、body の現在のコンテンツも削除されます。 div要素を追加し、bodyにコンテンツを残すには？

var el = document.getElementById('element');
var body = document.getElementsByTagName('body');
el.innerHTML = '<p><a id="clickme" href="#">Click me</a></p>';
document.getElementById('clickme').onclick = function (e) {
    e.preventDefault();
    document.body.innerHTML = '<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>';
}

解決方法は？

試してみてください。

http://jsfiddle.net/adiioo7/vmfbA/

使用方法

document.body.innerHTML += '<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>';

ではなく

document.body.innerHTML = '<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>';

編集:-) 理想的には body.appendChild メソッドを変更するのではなく innerHTML

var elem = document.createElement('div');
elem.style.cssText = 'position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000';
document.body.appendChild(elem);