জাভাস্ক্রিপ্ট সহ HTML উপাদান অন্তর্ভুক্ত করা হচ্ছে

105

নিচের সিনট্যাক্সটি ব্যবহার করার সময় ক্লান্তিকরভাবে প্রতিটি ধরণের অ্যাট্রিবিউট এবং ইভেন্টের জন্য কাজের ক্ষেত্রগুলির জন্য অনুসন্ধান করুন:

elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);

এমন কোনও উপায় আছে যেখানে আমি কেবল পুরো এইচটিএমএল উপাদানটিকে স্ট্রিং হিসাবে ঘোষণা করতে পারি? মত:

elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);

javascript html

— TheFlash
সূত্র

124

innerHTMLএটির সাথে সরাসরি গণ্ডগোলের পরিবর্তে একটি খণ্ড তৈরি করা ভাল এবং তারপরে সন্নিবেশ করা ভাল better

function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);

উপকারিতা:

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

যদিও innerHTMLফাংশনটির মধ্যে ব্যবহার করা হচ্ছে, এটি সমস্তই ডিওএমের বাইরে ঘটছে সুতরাং এটি আপনি যা ভাবেন তার চেয়ে তত দ্রুত ...

— জেমস
সূত্র

3

আমি বাজি ধরছি এই ক্রিয়েটকমেন্টফ্র্যাগমেন্ট () "উত্তরাধিকার" অভ্যন্তর এইচটিএমএল হিসাবে ভাল হবে না।

— TheFlash

2

এই পদ্ধতিটি সমস্ত আধুনিক ব্রাউজারে কাজ করে। IE 5.5 এবং এর নীচে আপনি যেমন একটি চেক সম্পাদন করতে পারেন :: যদি (ডকুমেন্ট.ক্রেটডোকমেন্টফ্র্যাগমেন্ট) {তৈরি করুন ('...'); } অন্য {/ * অভ্যন্তরীণ এইচটিএমএল সম্ভবত * / Use ব্যবহার করুন

— জেমস

32

ক্রিসেন্টফ্রেশ, আমি এসও তে সহায়তা করি কারণ আমি লোকদের সাহায্য করা উপভোগ করি; আমি দুঃখিত যদি সব পরিস্থিতিতে একটি সমাধান 100% অপারেশনযোগ্য না হয়। যদি আপনি এতটা উদ্বিগ্ন থাকেন তবে ইতিমধ্যে প্রস্তাবিত উত্তরগুলির জন্য অকারণে সমালোচিত হওয়ার পরিবর্তে কেন নিজের সমাধানটি অফার করবেন না? যে কোনও বিমূর্ততার সাথে সর্বদা প্রান্ত-কেস থাকবে! এটি একটি শিক্ষার পরিবেশ - আমরা মানুষকে একটি প্লেটে সমাধান দেওয়ার জন্য এখানে নেই - আমরা যা করি তা একে অপরকে আরও উন্নত করতে সহায়তা করার জন্য এখানে আছি! এবং দুঃখিত, তবে কেউ কোথায় "এজেএক্স" উল্লেখ করেছেন?

— জেমস

1

যথেষ্ট ফর্সা। আমার ক্ষমা। আমি কেবল অনুভব করেছি যে এখানে শূন্য ক্যাভেটগুলির উল্লেখ সহ প্রচুর বিমূর্ততা রয়েছে।

— ক্রিসেন্ট ফ্রেশ

1

এটি যতটা প্রয়োজন তার চেয়ে জটিলতর

— সিম বিদাসের

83

তুমি এটা চাও

document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID">...</div>' );

— Vidime বিদ্যা
সূত্র

13

নিশ্চিত না কেন এটি গৃহীত উত্তর নয়। এটি উপায় সহজ এবং আরও স্পষ্টতই সঠিক

— JonnyRaa

@ জনিলিডস এটিকে bodyউপাদানটিতে কাজ করে না বলে মনে হয় তবে অন্য কোনও উপাদানগুলিতে কাজ করে ।

— ফিল করুন

1

@ ফিলফ অবশ্যই এটি কাজ করে <body>। প্রকৃতপক্ষে, এটি চালানো <body>হ'ল কনসোলের মাধ্যমে ওয়েব পৃষ্ঠাগুলিতে স্টাইল শীটের মতো স্টাফগুলি ইনজেকশন দেওয়ার আমার মানক পদ্ধতি। কি সমস্যা আছে?

— Vidime বিদাস

@ আইমভিডাস সম্ভবত মৃত্যুর সময় দেহের উপাদান সংজ্ঞায়িত করা হয়নি বলে ... আমি আপনার লাইনটি উইন্ডো.অনলড = ফাংশন () দিয়ে সংযুক্ত করেছি {… that সমস্যাটি রোধ করতে

— জিডিওয়াই

@ গ্র্যান্ডি ফিল লিখেছেন যে এটি অন্যান্য উপাদানগুলির জন্য কাজ করে। যদি অপরিবর্তিত থাকে <body>তবে অন্য সমস্ত উপাদানও তাই, সম্ভবত এটি ফিলের সমস্যা নয়।

— Vidime বিদাস

32

InsertAdjacentH HTML এ একবার দেখুন

var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>

অবস্থান উপাদান আপনি সংলগ্ন ঢোকাতে হয় অবস্থানে আপেক্ষিক:

উপাদানটির আগে ' পূর্বে '

'afterbegin' উপাদানটির ভিতরে তার প্রথম সন্তানের ঠিক আগে

উপাদানটির ঠিক শেষের সন্তানের পরে 'পূর্বে'

'আফটারেন্ড' পরে উপাদানটি নিজেই

— svnm
সূত্র

17

পুরানো স্কুল জাভাস্ক্রিপ্টে, আপনি এটি করতে পারেন:

document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML;

আপনার মন্তব্যের জবাবে:

[...] আমি একটি নতুন উপাদানটির বৈশিষ্ট্য এবং ইভেন্টগুলির উত্স ঘোষণা করতে আগ্রহী innerHTML, কোনও উপাদানটির নয় of

যদিও আপনাকে নতুন এইচটিএমএলটি ডিওএম-তে ইনজেক্ট করতে হবে; কেন যে innerHTMLপুরানো স্কুল জাভাস্ক্রিপ্ট উদাহরণে ব্যবহার করা হয়। innerHTMLএর BODYউপাদান নতুন HTML সঙ্গে লেখা হয়। আমরা সত্যিই এটির ভিতরে বিদ্যমান এইচটিএমএলটিকে স্পর্শ করছি নাBODY ।

এটি পরিষ্কার করার জন্য আমি উপরোক্ত উদাহরণটি আবার লিখব:

var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>';
var bodyElement = document.body;
bodyElement.innerHTML = newElement + bodyElement.innerHTML;
// note that += cannot be used here; this would result in 'NaN'

একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করা এই কোডটিকে অনেক কম ভার্বোস করে তুলবে এবং পাঠযোগ্যতার উন্নতি করবে। উদাহরণস্বরূপ, jQuery আপনাকে নিম্নলিখিতগুলি করতে অনুমতি দেয়:

$('body').prepend('<p id="foo">Some HTML</p>');

— ম্যাথিয়াস ব্যেনেন্স
সূত্র

বেশ ভাল. তবে আমি কোনও উপাদানটির অভ্যন্তরীণ এইচটিএমএল নয়, একটি নতুন উপাদানটির বৈশিষ্ট্য এবং ইভেন্টগুলির উত্স ঘোষণায় আগ্রহী ছিল।

— TheFlash

1

document.getElementsByTagName('body')[0]প্রকৃতপক্ষে document.bodyভাল পয়েন্ট দ্বারা প্রতিস্থাপন করা যেতে পারে । তবে, আপনি যদি দেহের পরিবর্তে নতুন এইচটিএমএলটিকে অন্য বিদ্যমান উপাদানটিতে যুক্ত করতে বা যুক্ত করতে চান, আপনাকে document.getElementById()এবং / অথবা ব্যবহার করতে হবেdocument.getElementsByTagName() ; এই কারণেই আমি এটি উদাহরণে ব্যবহার করেছি।

— ম্যাথিয়াস বাইনেন্স

1

এছাড়াও, আপনি সরাসরি "অভ্যন্তরীণ এইচটিএমএল" যুক্ত / সন্নিবেশ করিয়ে দিলে আপনার কোড খুব দ্রুত অগোছালো হতে পারে

— জেমস

1

@ জিমিপি: কি আবর্জনা! এই প্রশ্নের মূল উদ্দেশ্যটি হ'ল এইচটিএমএলকে সরাসরি এটির জন্য ফাংশনগুলির সাথে খেলার পরিবর্তে স্ট্রিং হিসাবে সন্নিবেশ করাতে সক্ষম করা, গুণ অনুসারে নোড, নোড দ্বারা উপাদান দ্বারা উপাদান দ্বারা উপাদান।

— TheFlash

1

এটি সমস্ত ইভেন্ট হ্যান্ডলারকে আলাদা করে এবং মেমরি ফাঁস হতে পারে big

— অ্যাডার্ডাইজাইন

1

আমার জ্ঞানের মতে, যা মোটামুটি নতুন এবং সীমাবদ্ধ, এই কৌশলটির একমাত্র সম্ভাব্য সমস্যাটি হ'ল সত্য যে আপনি গতিশীলভাবে কিছু টেবিল উপাদান তৈরি থেকে বাধা পেয়েছেন।

আমি একটি লুকানো ডিআইভিতে "টেম্পলেট" উপাদান যুক্ত করে এবং তারপরে ক্লোননোড (সত্য) ব্যবহার করে একটি ক্লোন তৈরি করতে এবং প্রয়োজনীয় হিসাবে এটি যুক্ত করে টেম্পলেট করার জন্য একটি ফর্ম ব্যবহার করি। এটিকে সহ্য করে নিন যে সদৃশ প্রতিরোধের জন্য আপনাকে পুনরায় নিয়োগের আইডি নিশ্চিত করতে হবে।

— RPC
সূত্র

-1

অন্যরা যেমন বলেছিল সুবিধাজনক jQuery প্রিপেন্ড কার্যকারিতা অনুকরণ করা যায়:

var html = '<div>Hello prepended</div>';
document.body.innerHTML = html + document.body.innerHTML;

যদিও কেউ কেউ বলেছেন যে অভ্যন্তরীণ এইচটিএমএল দিয়ে "জগাখিচুড়ি" না করাই ভাল , তবে এটি ব্যবহারের ক্ষেত্রে অনেক ক্ষেত্রেই নির্ভরযোগ্য:

যদি একটি <div> , <span>অথবা <noembed>নোড একটি শিশু টেক্সট নোড যে অক্ষর অন্তর্ভুক্ত (হয়েছে &), ( <), অথবা ( >), innerHTML এই অক্ষরগুলি ফেরত পাঠায় &amp, &ltএবং &gtযথাক্রমে। Node.textContentএই পাঠ্য নোডের সামগ্রীর সঠিক কপি পেতে ব্যবহার করুন ।

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

বা:

var html = '<div>Hello prepended</div>';
document.body.insertAdjacentHTML('afterbegin', html)

insertAdjacentHTMLসম্ভবত একটি ভাল বিকল্প: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

— taseenb
সূত্র

-2

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

পরিবর্তে পরবর্তী কোড লিখতে

    var htmlCode = '<ul class=\'menu-countries\'><li
        class=\'item\'><img src=\'au.png\'></img><span>Australia </span></li><li
        class=\'item\'><img src=\'br.png\'> </img><span>Brazil</span></li><li
        class=\'item\'> <img src=\'ca.png\'></img><span>Canada</span></li></ul>';
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;

আপনি আরও বোধগম্য কাঠামো লিখতে পারেন

    var jtag = $j.ul({
        class: 'menu-countries',
        child: [
            $j.li({ class: 'item', child: [
                $j.img({ src: 'au.png' }),
                $j.span({ child: 'Australia' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'br.png' }),
                $j.span({ child: 'Brazil' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'ca.png' }),
                $j.span({ child: 'Canada' })
            ]})
        ]
    });
    var htmlCode = jtag.html();
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;

— Berezh
সূত্র