জাভাস্ক্রিপ্টে কোনও ডিওএম উপাদানটির জন্য এইচটিএমএল কীভাবে পাবেন


95

ভাবুন আমার কাছে নিম্নলিখিত HTML রয়েছে:

<div><span><b>This is in bold</b></span></div>

আমি নিজেই ডিভ সহ ডিভের জন্য এইচটিএমএল পেতে চাই। এলিমেন্ট.ইনার এইচটিএমএল কেবল ফেরত দেয়:

<span>...</span>

কোন ধারনা? ধন্যবাদ

উত্তর:


87

জাল্ডুপন্টের উত্তরটি প্রসারিত করে, আপনি উড়তে একটি মোড়কের উপাদান তৈরি করতে পারেন:

var target = document.getElementById('myElement');
var wrap = document.createElement('div');
wrap.appendChild(target.cloneNode(true));
alert(wrap.innerHTML);

আসল নথিতে উপাদানটি সরিয়ে ফেলা এবং এড়াতে না এড়াতে আমি উপাদানটির ক্লোনিং করছি। আপনি যে উপাদানটি মুদ্রণ করতে চান তার নীচে খুব বড় গাছ থাকলে এটি ব্যয়বহুল হতে পারে।


হাই - ব্যালেন্সে এটি সম্ভবত আমার সেরা বিকল্প। উপাদানগুলিকে বিচ্ছিন্ন করা / সংযুক্ত করার বিষয়ে একটু সতর্কতা অবলম্বন করে, আমি ডিওএম স্ক্রু করতে পারি না এবং সেখানে বড় বড় গাছ থাকার আশাও করি না।
রিচার্ড এইচ

যদি না myElement একটি উপাদান যে একটি div সন্তান হতে পারে না, একটি লি, টেবিল সারি বা টেবিল সেল ইত্যাদি ভালো হয়।
রবজি

20
এখন এটি 2013, "domnode.outerHTML" কল করা সমস্ত বড় ব্রাউজারগুলিতে (v11 সাল থেকে এফএফ) কাজ করে
কেভিন

90

ব্যবহার outerHTML:

var el = document.getElementById( 'foo' );
alert( el.outerHTML );

4
না এটি কোনও এক্সটেনশন নয়। যদিও সেখানে ফায়ারফক্সের কাজের অস্তিত্ব রয়েছে: snipplr.com/view/5460/outerhtml-in-firefox
Wim

4
ওয়েবকিট ভিত্তিক ব্রাউজারগুলি এটি সমর্থন করে বলে মনে হচ্ছে, তবে ফায়ারফক্স তা সমর্থন করে না।
জার্ন শো-রোড

4
Quirksmode.org/dom/w3c_html.html এর মতে এটি আইই, অপেরা, সাফারি এবং ক্রোমে কাজ করা উচিত।
মাজ্কেল

18
নোট করুন যে আউটআরএইচটিএমএল HTML5 এর অংশ, এবং তাই প্রত্যেকেরই সময় মতো সমর্থন করা উচিত।
Xanthir

7
outerHTMLএফএফ 11 থেকে সমর্থিত: ডেভেলপার.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এপিআই / এলিমেন্ট.উটার এইচটিএমএল ।
ফেলিক্স ক্লিং

8

প্রথমে এমন উপাদানটি রাখুন যা divপ্রশ্নটিকে মোড়ক করে , idউপাদানটিতে একটি বৈশিষ্ট্য রাখুন এবং তারপরে getElementByIdএটি ব্যবহার করুন: একবার ধার দেওয়া হয়ে গেলে এইচটিএমএল পুনরুদ্ধার করতে কেবল 'e.innerHTML`' করুন।

<div><span><b>This is in bold</b></span></div>

=> <div id="wrap"><div><span><b>This is in bold</b></span></div></div>

এবং তারপর:

var e=document.getElementById("wrap");
var content=e.innerHTML;

নোট যে outerHTMLক্রস ব্রাউজার সামঞ্জস্যপূর্ণ নয়।


4
ডিভের পিতামাতার জন্য অভ্যন্তরীণ এইচটিএমএল পাওয়ার সমস্যাটি হ'ল আমি ডিভের ভাইবোনদের জন্যও অভ্যন্তরীণ এইচটিএমএল পাবো
রিচার্ড এইচ

আমার খারাপ, আমি ভেবেছিলাম "উপাদানটির জন্য একটি আইডি বৈশিষ্ট্য রেখেছি" "উপাদানটিকে" উল্লেখ করা হয়েছে। আপনার শেষ সম্পাদনাটি দিয়ে এটি অনেকটা পরিষ্কার হয়ে গেছে যে আপনি divস্যুপে একটি অতিরিক্ত যুক্ত করতে চান :)
জার্ন শো-রোড

@ জেপি: যদি উপাদানটি না থাকে document... তবে এটি কোথায়, আপনি আমাদের সকলকে আলোকিত করার জন্য যত্নবান হন?
jldupont

@ জেপি: অবশ্যই আপনি এমন উপাদান তৈরি করতে পারেন যেখানে আপনি চান তবে এটি ডাউন ভোটের কোনও কারণ নয় ... আপনি এই ধরণের মনোভাব নিয়ে এখানে খুব বেশি বন্ধু তৈরি করতে পারবেন না।
jldupont

খুব নিশ্চিত যে আউটআর এইচটিএমএল দীর্ঘ, দীর্ঘ সময়ের জন্য ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ - এটি ব্যবহার করতে ভয় পাবেন না।
তুষারপাত

3

আপনি যদি একটি হালকা পদচিহ্ন, তবে একটি দীর্ঘ স্ক্রিপ্ট চান তবে উপাদানগুলি অভ্যন্তরীণ এইচটিএমএল পান এবং কেবল খালি পিতামাতার তৈরি এবং ক্লোন করুন-

function getHTML(who,lines){
    if(!who || !who.tagName) return '';

    var txt, ax, str, el= document.createElement('div');
    el.appendChild(who.cloneNode(false));
    txt= el.innerHTML;
    ax= txt.indexOf('>')+1;
    str= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);

    el= null;
    return lines? str.replace(/> *</g,'>\n<'): str;
    //easier to read if elements are separated
}


2

বাইরেরএইচটিএমএল যেমন আইই, তাই এই ফাংশনটি ব্যবহার করুন:

function getOuterHtml(node) {
    var parent = node.parentNode;
    var element = document.createElement(parent.tagName);
    element.appendChild(node);
    var html = element.innerHTML;
    parent.appendChild(node);
    return html;
}

টাইপ পিতামাতার একটি বোগাস খালি উপাদান তৈরি করে এবং এতে অভ্যন্তরীণ এইচটিএমএল ব্যবহার করে এবং আবার উপাদানটিকে স্বাভাবিক ডোমে ফিরিয়ে দেয় aches


2

ক্রস ব্রাউজার হওয়ার জন্য আপনি এর মতো কিছু চাইবেন।

function OuterHTML(element) {
    var container = document.createElement("div");
    container.appendChild(element.cloneNode(true));

    return container.innerHTML;
}

4
এই মুছে ফেলা হবে elementযখন বলা হয়, অধিকার দস্তাবেজ থেকে?
জার্ন শো-রোড

এটি, এখনই ক্লোননোড যুক্ত করে এটি স্থির করে রেখেছে, যা এখানকার অন্যান্য উত্তরগুলির সাথে একেবারে অভিন্ন করে তোলে।
নিকোলাস স্টিফান


0

উপাদান.উটার এইচটিএমএল এর সমর্থনের উপর ভিত্তি করে ফাংশন বহিরাগত এইচটিএমএল নির্ধারণ করুন:

var temp_container = document.createElement("div"); // empty div not added to DOM
if (temp_container.outerHTML){
    var outerHTML = function(el){return el.outerHTML||el.nodeValue} // e.g. textnodes do not have outerHTML
  } else { // when .outerHTML is not supported
    var outerHTML = function(el){
      var clone = el.cloneNode(true);
      temp_container.appendChild(clone);
      outerhtml = temp_container.innerHTML;
      temp_container.removeChild(clone);
      return outerhtml;
    };
  };

-2
var el = document.getElementById('foo');
el.parentNode.innerHTML;

4
এটি ডিভের ভাইবোনদের জন্য সঠিক হলেও যদিও আমাকে কোনও এইচটিএমএল দেবে?
রিচার্ড এইচ

ডাউন ভোট নিয়ে কী হবে? আসল প্রশ্নের ভাইবোনের সাথে কোনও সম্পর্ক ছিল না। এই উত্তরটি প্রশ্নের মূল প্রেক্ষাপটে একটি সঠিক বৈধ উত্তর ছিল।
জেসন লেভিল

অন্যদিকে, মূল প্রশ্নের কোনও অভিভাবকের সাথে কোনও সম্পর্ক ছিল না। তাতে কী.
জেসন লেভিল 14
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.