139

मैं शुद्ध जावास्क्रिप्ट में एक प्रकाश बॉक्स बना रहा हूं। उसके लिए मैं एक ओवरले बना रहा हूं। मैं इस ओवरले को बॉडी में जोड़ना चाहता हूं लेकिन मैं पेज पर कंटेंट भी रखना चाहता हूं। मेरा वर्तमान कोड ओवरले डि को जोड़ता है लेकिन यह शरीर में वर्तमान सामग्री को भी हटा देता है। 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

— Om3ga
स्रोत

4

क्या आपने इसे इस तरह जोड़ने की कोशिश की है: document.body.innerHTML = '<div style = "स्थिति: निरपेक्ष; चौड़ाई: 100%; ऊँचाई: 100%; अपारदर्शिता: 0.3; z-सूचकांक: 100; पृष्ठभूमि: # 000;" > </ div> '+ document.body.innerHTML;

— रिकी

159

इसे आज़माएं: -

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

— आदित्य सिंह
स्रोत

18

आपको यह विचार करने की आवश्यकता है कि document.body.innerHTML = 'कुछ' करने से बहुत सारी अनावश्यक गणना हो जाती है क्योंकि ब्राउज़र को 'कुछ' स्ट्रिंग को पार्स करने की आवश्यकता होती है और यह एक बड़े पृष्ठ में बहुत कुछ लेता है। नया तत्व बनाने और इसे DOM से अटैच करने के लिए बहुत अधिक परफॉर्मेंट अप्रोच है। इस तुलना को jsperf पर देखें: jsperf.com/innerhtml-vs-appendchild2

— fegemo

14

इस दृष्टिकोण के कुछ अवांछित दुष्प्रभाव भी होंगे। उदाहरण के लिए, आपके द्वारा सेट किए जाने के बाद बाल तत्वों पर सभी बाध्य ईवेंट अनबाउंड हो जाएंगे innerHTML।

— अनूपीलास

5

यह निश्चित रूप से गलत जवाब है ... सवाल एक तत्व को जोड़ने के बारे में पूछता है, पूरे पृष्ठ को फिर से लिखना नहीं, एक बेहतर विकल्प के लिए जेपीएच देखें।

— क्रिश्चियन

4

-1। यह इसे प्राप्त करने का एक भयानक तरीका है। यदि आप इसे पढ़ रहे हैं, तो इस धीमे और दिनांकित समाधान का उपयोग न करें। @

— पेटर

3

न केवल यह धीमा है, बल्कि पहले के तत्वों को नष्ट कर देता है, इसलिए किसी भी घटना के श्रोताओं को पहले से जुड़े पेज खो जाते हैं! हर कीमत पर ऐसा करने से बचें। इसके बजाय appendChild का उपयोग करें।

— क्रन्ति किरण P

223

जावास्क्रिप्ट का उपयोग करना

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

— पीटर टी।
स्रोत

2

सबसे अजीब बात। मेरे सबसे खराब, शुद्ध जावास्क्रिप्ट में हमेशा कुछ भी करने का तरीका रहा है जो मैं करना चाहता था।

— स्पेंसर विलियम्स

3

यह स्वीकृत उत्तर होना चाहिए। यह एकमात्र उत्तर है जो सही तरीके से इस बारे में जाता है।

— मैक्रों

@MacroMan यहां तक कि jquery संस्करण? मैं jquery का उपयोग कर रहा हूं और इसे ठीक से करना भी चाहूंगा। (केवल यह सुनिश्चित करने के कारण कि उसका jquery उत्तर केवल एक पंक्ति है और एक नोड या कुछ भी बनाने के लिए प्रतीत नहीं होता है।)

— felwithe

@felwithe jQuery संस्करण स्वीकार्य है, लेकिन आप अपने कोड में अधिक स्पष्टता की आवश्यकता होने पर खरोंच से नोड बनाने और व्यक्तिगत रूप से शैलियों को लागू करने की इच्छा कर सकते हैं।

— मैक्रोमैन

appendChild()और insertBefore()सम्मिलित किए जाने वाले तत्व के स्थान पर और भी अधिक लचीलापन दें

— औसत 18

21

इसके बजाय सब कुछ के भीतर की कोशिश के साथ HTML:

document.body.appendChild(myExtraNode);

— जोकिम पोरोमा हेल्गर
स्रोत

10

ध्यान दें कि आप बस कर शरीर को प्राप्त कर सकते हैं document.body।

— क्रिश्चियन

यह एक बेहतर उपाय है।

— अभिषेक सिन्हा

12

@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}";
}

XPathDOM ट्री में एलिमेंट की स्थिति का पता लगाने और एक निर्दिष्ट स्थान पर 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);

— यश
स्रोत

2

करने की कोशिश करो

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

— कोडी नोर्डेन
स्रोत

2

आप अपना divHTML कोड बना सकते हैं और इसे bodyनिम्नलिखित कोड के साथ सीधे (या किसी भी तत्व) में सेट कर सकते हैं :

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

— याशर अलीबासी
स्रोत

सबसे अच्छा और आसान तरीका। धन्यवाद!

— मुहम्मद अली

1

आधुनिक तरीका उपयोग करना है ParentNode.append(), जैसे:

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

स्निपेट का विस्तार करें

— लुइस रामल्हो
स्रोत

0

सबसे अच्छा और बेहतर तरीका एक तत्व बनाना है और इसे bodyटैग में जोड़ना है । दूसरा तरीका यह है कि आप सबसे पहले innerHTMLप्रॉपर्टी लें bodyऔर इसके साथ कोड जोड़ें। उदाहरण के लिए:

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

— सयंज्योति दास
स्रोत

3

सबसे पहले, आप बस कर पेज बॉडी के लिए प्राप्त कर सकते हैं document.body, दूसरा, जैसा कि मैंने पहले उल्लेख किया है, एक तत्व को जोड़ने के लिए केवल पूरे पृष्ठ को फिर से लिखना नहीं है।

— क्रिश्चियन

-2

यहाँ वास्तव में एक त्वरित चाल है: मान लें कि आप div टैग के अंदर p टैग जोड़ना चाहते हैं।

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

और बस।

— Poussy
स्रोत

जावास्क्रिप्ट में शरीर या दस्तावेज़ में div तत्व जोड़ना

इसे आज़माएं: -