Добавление элемента div в тело или документ в JavaScript

Я создаю лайтбокс в чистом 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>';
}
108 голосов | спросил 2619 1 PMpMon, 01 Apr 2013 13:37:58 +040037Monday 2013, 13:37:58

7 ответов


0

Попробуйте это: -

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

Edit: - В идеале вы должны использовать метод 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);
ответил Aditya Singh 1 PMpMon, 01 Apr 2013 13:43:33 +040043Monday 2013, 13:43:33
0

Использование Javascript

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

Использование jQuery

$('body').append('<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>');
ответил Peter T. 1 PMpMon, 01 Apr 2013 16:03:22 +040003Monday 2013, 16:03:22
0

Вместо замены всего на innerHTML попробуйте:

document.body.appendChild(myExtraNode);

ответил Joakim Poromaa Helger 4 52016vEurope/Moscow11bEurope/MoscowFri, 04 Nov 2016 13:47:24 +0300 2016, 13:47:24
0

улучшаем работу @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}";
}

Использование XPath найдите положение элемента в дереве DOM и вставьте указанный текст в указанной позиции в 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"]/table/tbody/tr[1]/td[2]/div';
var childHTML = '<div id="Yash">Hi My name is <B>\"YASHWANTH\"</B></div>';
var position = 'beforeend';
insertHTML_ByXPath(xpath_DOMElement, position, childHTML);
ответил Yash 12 42015vEurope/Moscow11bEurope/MoscowThu, 12 Nov 2015 14:04:18 +0300 2015, 14:04:18
0

Попробуйте сделать

document.body.innerHTML += '<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>'
ответил Cody Norden 1 PMpMon, 01 Apr 2013 13:41:16 +040041Monday 2013, 13:41:16
0

Лучший и лучший способ - создать элемент и добавить его в тег body. Второй способ - сначала получить свойство innerHTML для body

var b = document.getElementsByTagName('body');
b.innerHTML = b.innerHTML + "Your code";
ответил Sayanjyoti Das 23 MarpmWed, 23 Mar 2016 18:56:41 +03002016-03-23T18:56:41+03:0006 2016, 18:56:41
0

Вы можете создать свой HTML-код div и установить его непосредственно в body (или любой элемент) со следующим кодом:

var divStr = '<div class="text-warning">Some html</div>';
document.getElementsByTagName('body')[0].innerHTML += divStr;
ответил Yashar Aliabasi 11 Jpm1000000pmFri, 11 Jan 2019 22:37:15 +030019 2019, 22:37:15

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132