JavaScript에서 본문 또는 문서에 div 요소 추가

JavaScript에서 본문 또는 문서에 div 요소 추가

저는 순수 자바스크립트로 라이트 박스를 만들고 있습니다.그것을 위해 저는 오버레이를 만들고 있습니다.본문에 이 오버레이를 추가하고 싶지만 페이지의 내용도 유지하고 싶습니다.나의 현재 코드는 오버레이 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>';
}

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

이것을 사용해 보세요:-

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

모든 것을 내부로 대체하는 대신HTML 시도:

document.body.appendChild(myExtraNode);

모든 솔루션을 한 곳에 모아 @Peter T의 위치를 개선합니다.

요소.인접 삽입HTML()

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 Tree에서 Element의 위치를 찾고 지정된 위치에 지정된 텍스트를 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);

가장 과소평가된 방법은insertAdjacentElement문자 그대로 한 줄로 HTML을 추가할 수 있습니다.

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

여기를 읽어 보십시오 - https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

현대적인 방법은 다음과 같이 사용하는 것입니다.

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

해보세요

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

당신은 당신의divHTML 코드를 직접 설정합니다.body(또는 임의의 요소) 다음 코드를 사용합니다.

var divStr = '<div class="text-warning">Some html</div>';
document.getElementsByTagName('body')[0].innerHTML += divStr;

가장 좋고 더 나은 방법은 요소를 생성하고 추가하는 것입니다.bodytag. 두 번째 방법은 먼저 그것을 얻는 것입니다.innerHTML의 재산.body코드를 추가합니다.예:

var b = document.getElementsByTagName('body');
b.innerHTML = b.innerHTML + "Your code";

여기 정말 빠른 속임수가 있습니다.div 태그 안에 p 태그를 추가하고 싶다고 가정해 보겠습니다.

<div>
<p><script>document.write(<variablename>)</script></p>
</div>

그리고 이것이 마지막입니다.

언급URL : https://stackoverflow.com/questions/15741006/adding-div-element-to-body-or-document-in-javascript