176

純粋な JavaScript でライト ボックスを作成しています。そのために、オーバーレイを作成しています。このオーバーレイを本文に追加したいのですが、ページのコンテンツも保持したいです。私の現在のコードはオーバーレイ div を追加しますが、本文の現在のコンテンツも削除します。div要素を追加して内容を本体に保持する方法は?

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

10 に答える 10

205

これを試してください:-

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);
于 2013-04-01T09:43:33.563 に答える
17

すべてのソリューションを 1 か所にまとめることで、@Peter T の投稿を改善します。

Element.insertAdjacentHTML()

function myFunction() {
    window.document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID" style="color:blue;"> With some data...</div>' );
}
function addElement(){
    var elemDiv = document.createElement('div');
    elemDiv.style.cssText = 'width:100%;height:10%;background:rgb(192,192,192);';
    elemDiv.innerHTML = 'Added element with some data'; 
    window.document.body.insertBefore(elemDiv, window.document.body.firstChild);
    // document.body.appendChild(elemDiv); // appends last of that element
}
function addCSS() {
    window.document.getElementsByTagName("style")[0].innerHTML += ".mycss {text-align:center}";
}

DOM ツリー内のエレメントの位置をXPath検索し、指定されたテキストを指定された位置に XPath_Element に挿入します。ブラウザ コンソールでこのコードを試してください。

function insertHTML_ByXPath( xpath, position, newElement) {
    var element = document.evaluate(xpath, window.document, null, 9, null ).singleNodeValue;
    element.insertAdjacentHTML(position, newElement);
    element.style='border:3px solid orange';
}

var xpath_DOMElement = '//*[@id="answer-33669996"]';
var childHTML = '<div id="Yash">Hi My name is <B>\"YASHWANTH\"</B></div>';
var position = 'beforeend';
insertHTML_ByXPath(xpath_DOMElement, position, childHTML);
于 2015-11-12T11:04:18.670 に答える
7

最も過小評価されている方法はinsertAdjacentElement. 文字通り 1 行で HTML を追加できます。

document.body.insertAdjacentElement('beforeend', html)

ここでそれについて読んでください - https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

于 2021-01-27T10:45:40.677 に答える
2

やってみる

document.body.innerHTML += '<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>'
于 2013-04-01T09:41:16.360 に答える