জাভাস্ক্রিপ্টে দেহ বা নথিতে ডিভ উপাদান যুক্ত করা হচ্ছে

Question

আমি খাঁটি জাভাস্ক্রিপ্টে একটি হালকা বাক্স তৈরি করছি। তার জন্য আমি একটি ওভারলে তৈরি করছি। আমি এই ওভারলেটি শরীরে যুক্ত করতে চাই তবে আমি সামগ্রীটি পৃষ্ঠাতে রাখতে চাই। আমার বর্তমান কোডটি ওভারলে ডিভ যুক্ত করে তবে এটি শরীরের বর্তমান সামগ্রীগুলিও সরিয়ে দেয়। কীভাবে ডিভ এলিমেন্ট যুক্ত করতে এবং শরীরে সামগ্রী রাখা যায়?

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

Comments

আপনি কি এটিকে যুক্ত করার চেষ্টা করেছেন: ডকুমেন্ট.বিডি.ইন.এনটিএমএল = '<ডি স্টাইল = "অবস্থান: পরম; প্রস্থ: 100%; উচ্চতা: 100%; অস্বচ্ছতা: 0.3; জেড-সূচক: 100; পটভূমি: # 000;" > </ p> + document.body.innerHTML;

— রিকি

Answer 1

এটি ব্যবহার করে দেখুন: -

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

Comments

আপনার বিবেচনা করা উচিত যে ডকুমেন্ট.বডি.ইনার.এইচটিএমএল = 'কিছু' করার ফলে প্রচুর অপ্রয়োজনীয় গণনা জড়িত কারণ ব্রাউজারটির 'কিছু' স্ট্রিং পার্স করা দরকার এবং এটি একটি বড় পৃষ্ঠায় অনেক বেশি লাগে। আরও একটি পারফরম্যান্স পদ্ধতি হল নতুন উপাদান তৈরি করা এবং এটি ডিওএমের সাথে সংযুক্ত করা। এই তুলনাটি jsperf এ দেখুন: jsperf.com/innerhtml-vs-appendchild2

— ফেজমো

এই পদ্ধতির কিছু অযাচিত পার্শ্ব প্রতিক্রিয়াও থাকবে। উদাহরণস্বরূপ, একবার innerHTMLনতুন করে সেট করার পরে শিশু উপাদানগুলিতে সমস্ত সীমাবদ্ধ ইভেন্টগুলি সীমাহীন হয়ে উঠবে ।

— anoopelias

এটি অবশ্যই ভুল উত্তর ... প্রশ্নটি একটি উপাদান যুক্ত করার বিষয়ে জিজ্ঞাসা করে, পুরো পৃষ্ঠাটি পুনরায় লেখার জন্য নয়, আরও ভাল বিকল্পের জন্য জেপিএইচ দেখুন।

— খ্রিস্টান

-1। এটি অর্জনের এটি একটি ভয়াবহ উপায়। আপনি যদি এটি পড়ছেন তবে এই ধীর এবং তারিখযুক্ত সমাধানটি ব্যবহার করবেন না। @ পিটার-টি দ্বারা উত্তরটি দেখুন

— ম্যাক্রোম্যান

কেবল এটিই ধীর নয়, তবে পূর্ববর্তী উপাদানগুলিকে ধ্বংস করে দেয়, সুতরাং পৃষ্ঠার সাথে সংযুক্ত যে কোনও ইভেন্ট শ্রোতারাই হারাবেন! এটিকে যেকোন মূল্যে এড়িয়ে চলুন। পরিবর্তে অ্যাপেনডিল্ড ব্যবহার করুন।

— ক্রান্তি কিরণ পি

Answer 2

জাভাস্ক্রিপ্ট ব্যবহার করে

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

Comments

আজব জিনিস। আমার নিকৃষ্টতম, খাঁটি জাভাস্ক্রিপ্ট সবসময়ই আমি যা করতে চাই তা করার উপায় ছিল।

— স্পেন্সার উইলিয়ামস

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। এটি একমাত্র উত্তর যা এটি সম্পর্কে সঠিক পথে যায়।

— ম্যাক্রোম্যান

@ ম্যাক্রোমন এমনকি জ্যাকারি সংস্করণ? আমি jquery ব্যবহার করছি এবং এটি সেভাবে সঠিকভাবে করতে চাই। (জাস্ট নিশ্চিত কারণ তার jQuery উত্তর শুধুমাত্র এক লাইন এবং একটি নোড কিছু তৈরি বলে মনে হচ্ছে না।)

— felwithe

@ ফিলিভিথ jQuery সংস্করণটি গ্রহণযোগ্য, তবে আপনি আপনার কোডটিতে আরও স্পষ্টতার প্রয়োজন হলে আপনি স্ক্র্যাচ থেকে নোড তৈরি করতে এবং স্বতন্ত্রভাবে শৈলীগুলি প্রয়োগ করতে পারেন।

— ম্যাক্রোম্যান

appendChild()এবং insertBefore()element

— োকানো

Answer 3

অভ্যন্তরীণ এইচটিএমএল দিয়ে সবকিছু প্রতিস্থাপনের পরিবর্তে চেষ্টা করুন:

document.body.appendChild(myExtraNode);

Comments

মনে রাখবেন যে আপনি সহজভাবে শরীরে উঠতে পারেন document.body।

— খ্রিস্টান

এটি একটি ভাল সমাধান।

— অভিষেক সিনহা

Answer 4

সমস্ত সমাধান এক জায়গায় একত্রিত করে @ পিটার টি এর পোস্টের উন্নতি।

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ডিওএম ট্রিতে এলিমেন্টের অবস্থানটি ব্যবহার করে এবং একটি এক্সপ্যাথ_এলিমেন্টে একটি নির্দিষ্ট অবস্থানে নির্দিষ্ট পাঠ্য সন্নিবেশ করান। ব্রাউজার কনসোলের মাধ্যমে এই কোডটি ব্যবহার করে দেখুন।

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

Answer 5

করার চেষ্টা করুন

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

Answer 6

আপনি আপনার divএইচটিএমএল কোড তৈরি করতে পারেন এবং এটিকে bodyনিম্নলিখিত কোড সহ সরাসরি (বা কোনও উপাদান) এ সেট করতে পারেন :

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

Comments

সেরা এবং সহজ উপায়। ধন্যবাদ!

— মুহাম্মদ আলী

Answer 7

আধুনিক উপায়টি হ'ল ব্যবহার করা যেমন 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);

Answer 8

সবচেয়ে ভাল এবং সর্বোত্তম উপায় হ'ল একটি উপাদান তৈরি করা এবং এটি bodyট্যাগে যুক্ত করা। দ্বিতীয় উপায় হ'ল প্রথমে এর innerHTMLসম্পত্তি পেতে bodyএবং এর সাথে কোড যুক্ত করা। উদাহরণ স্বরূপ:

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

Comments

প্রথমত, আপনি কেবল পৃষ্ঠার মুখ্য পৃষ্ঠাতে যেতে পারেন document.body, দ্বিতীয়ত যেমনটি আমি আগে উল্লেখ করেছি, কেবলমাত্র একটি উপাদান সংযোজন করার জন্য পুরো পৃষ্ঠাটি পুনরায় লিখন করবেন না।

— খ্রিস্টান

Answer 9

এখানে একটি সত্যিই দ্রুত কৌশল: ধরা যাক আপনি ডি ট্যাগের ভিতরে পি ট্যাগ যুক্ত করতে চান।

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

এবং এটাই.