অন্তর্নির্মিত ডিওএম পদ্ধতি বা প্রোটোটাইপ ব্যবহার করে এইচটিএমএল স্ট্রিং থেকে একটি নতুন ডিওএম উপাদান তৈরি করা

Question

আমি একটি উপাদান প্রতিনিধিত্বমূলক একটি HTML স্ট্রিং আছে: '<li>text</li>'। আমি এটিকে ডোমের একটি উপাদানটিতে যুক্ত করতে চাই ( ulআমার ক্ষেত্রে এটি)। প্রোটোটাইপ বা ডিওএম পদ্ধতিতে আমি কীভাবে এটি করতে পারি?

(আমি জানি আমি jQuery এ এটি সহজেই করতে পারি, তবে দুর্ভাগ্যক্রমে আমরা jQuery ব্যবহার করছি না))

Comments

দুঃখিত, আপনি ঠিক কি অর্জন করতে চেষ্টা করছেন? এইচটিএমএল স্ট্রিং -> ডোম উপাদান?

— ক্রিসেন্ট তাজা

দুর্ভাগ্যজনক যে এই সমাধানগুলি এতটাই অপ্রত্যক্ষ। আমি আশা করি মানক কমিটি অনুরূপ কিছু নির্দিষ্ট করে দেয়:var nodes = document.fromString("<b>Hello</b> <br>");

— শ্রীধর সারনোবাত

MDN: "এইচটিএমএল_টো_ডম"

— vsync

উপরোক্ত বিষয়ে আমার সমস্যা ছিল, কারণ আমার এমন গুণাবলিগুলি ছিল যাগুলি পাশ করানো দরকার এবং সেগুলি পার্স করার মতো মনে হয় না: "<টেবিল আইডি = '5ccf9305-4b10-aec6-3c55-a6d218bfb107' শ্রেণি = 'ডেটা-টেবিল সারি-সীমান্ত প্রদর্শন 'সেলস্পেসিং =' 0 'প্রস্থ =' 100% '> </table> "সুতরাং, আমি সহজভাবে ব্যবহার করেছি: $ (" <টেবিল id =' 5ccf9305-4b10-aec6-3c55-a6d218bfb107 'শ্রেণি =' ডেটা -সামগ্রী সারি-সীমান্ত প্রদর্শন 'সেলস্পেসিং =' 0 'প্রস্থ =' 100% '> </ টেবিল> ")

— স্টিভেনসেইর্দা

Answer 1

দ্রষ্টব্য: বেশিরভাগ বর্তমান ব্রাউজারগুলি এইচটিএমএল <template>উপাদানগুলিকে সমর্থন করে, যা স্ট্রিংগুলি থেকে উপাদান তৈরি করার আরও নির্ভরযোগ্য উপায় সরবরাহ করে। দেখুন বিস্তারিত জানার জন্য নিচে মার্ক এ Amery এর উত্তর ।

পুরানো ব্রাউজারগুলি এবং নোড / জএসডম : (যা <template>লেখার সময় উপাদানগুলিকে এখনও সমর্থন করে না ), নিম্নলিখিত পদ্ধতিটি ব্যবহার করুন। এইচটিএমএল স্ট্রিং থেকে ডিওএম উপাদান পেতে লাইব্রেরিগুলি একই জিনিস ব্যবহার করে ( এর বাস্তবায়নে বাগের চারপাশে কাজ করার জন্য IE এর জন্য কিছু অতিরিক্ত কাজ সহ innerHTML):

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes
  return div.firstChild; 
}

লক্ষ্য করুন অসদৃশ এইচটিএমএল টেমপ্লেট এই করা হবে না কিছু উপাদান আইনত ভাবে সন্তান হবে দিতে পারে না যে কাজ <div>যেমন <td>সে।

আপনি যদি ইতিমধ্যে একটি লাইব্রেরি ব্যবহার করেন তবে আমি আপনাকে এইচটিএমএল স্ট্রিং থেকে উপাদান তৈরির লাইব্রেরি-অনুমোদিত পদ্ধতিতে লেগে থাকার পরামর্শ দিচ্ছি:

• প্রোটোটাইপটির নিজস্ব update()পদ্ধতিটি এই পদ্ধতিতে অন্তর্নির্মিত রয়েছে ।
• jQuery এটি jQuery(html)এবং এর jQuery.parseHTMLপদ্ধতিতে প্রয়োগ করেছে ।

Comments

এই অনিরাপদ অভ্যন্তরীণ এইচটিএমএল অ্যাসাইনমেন্টটি ব্যবহার না করে jQuery ব্যবহার করে কীভাবে তৈরি ডিভের অভ্যন্তরীণ এইচটিএমএল সেট করবেন (div.innerHTML = "কিছু মান")

— শিবংশু গোয়াল 6:58

ফাংশনটির নাম createElementFromHTML বিভ্রান্তিকর হয় যেহেতু এমন div.firstChildফেরত দেয় Nodeযা HTMLElementউদাহরণস্বরূপ পারে না node.setAttribute। পরিবর্তে ফাংশন থেকে একটি Elementরিটার্ন তৈরি করতে div.firstElementChild।

— সেমেল

আপনাকে ধন্যবাদ, <div>আমি যে এইচটিএমএল যুক্ত করেছি তাতে মোড়ানো .innerHTMLআমাকে বিরক্ত করেছিল। আমি কখনই ব্যবহার করার কথা ভাবিনি .firstChild।

— ইভান

আমি তৈরির ভিতরে একটি এসভিজি পার্স করার চেষ্টা করছি divএবং আউটপুটটি [object SVGSVGElement]যখন কনসোল লগটি আমাকে সঠিক ডোম উপাদান দেয়। আমি কি ভুল করছি?

— ed1nh0

আমি ফার্স্টচিল্ডের পরিবর্তে ফার্স্টএলমেন্টচিল্ড ব্যবহার করব ( w3schools.com/jsref/prop_element_firstelementchild.asp দেখুন ), কারণ যদি টেমপ্লেটের সামনের বা শেষ অংশ থাকে তবে ফার্স্টচাইল্ড খালি পাঠ্য নোড ফিরে আসবে

— ক্রিস

Answer 2

এইচটিএমএল 5 <template>এলিমেন্টটি চালু করেছে যা এই উদ্দেশ্যে ব্যবহার করা যেতে পারে (যেমন এখন হোয়াটডব্লিউজি স্পেক এবং এমডিএন ডক্সে বর্ণিত )।

<template>এইচটিএমএলের টুকরোগুলি ঘোষণ করতে একটি উপাদান ব্যবহৃত হয় যা স্ক্রিপ্টগুলিতে ব্যবহার করা যায়। টেমপ্লেটের বিষয়বস্তুগুলিতে অ্যাক্সেস সরবরাহ করার জন্য উপাদানটি ডিওএম-তে উপস্থাপিত হয় HTMLTemplateElementযার একটি ধরণের .contentসম্পত্তি রয়েছে DocumentFragment। এর অর্থ হল যে আপনি কোনও এলিমেন্টের স্ট্রিংটি innerHTMLএকটি <template>এলিমেন্টের সেটিং করে ডিওএম উপাদানগুলিতে রূপান্তর করতে পারেন , তারপরে templateতার .contentসম্পত্তিতে পৌঁছাতে পারেন ।

উদাহরণ:

/**
 * @param {String} HTML representing a single element
 * @return {Element}
 */
function htmlToElement(html) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return template.content.firstChild;
}

var td = htmlToElement('<td>foo</td>'),
    div = htmlToElement('<div><span>nested</span> <span>stuff</span></div>');

/**
 * @param {String} HTML representing any number of sibling elements
 * @return {NodeList} 
 */
function htmlToElements(html) {
    var template = document.createElement('template');
    template.innerHTML = html;
    return template.content.childNodes;
}

var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>');

নোট করুন যে একই ধরণের পন্থা যা বিভিন্ন ধারক উপাদান ব্যবহার করে যেমন একটিdiv কাজ করে না। এইচটিএমএলটিতে অন্যান্য উপাদান উপাদানগুলির মধ্যে কোন উপাদান ধরণের বিদ্যমান থাকতে দেওয়া যায় তার উপর বিধিনিষেধ রয়েছে; উদাহরণস্বরূপ, আপনি এ এর tdসরাসরি সন্তান হিসাবে একটি রাখতে পারবেন না div। এই যদি আপনার সেট করা চেষ্টা বিলুপ্ত এই উপাদান কারণ innerHTMLএকটি এর divতাদের ধারণ করার। থেকে<template> এর সামগ্রীতে এই জাতীয় কোনও বিধিনিষেধ নেই, কোনও টেম্পলেট ব্যবহার করার সময় এই ঘাটতি প্রযোজ্য নয়।

তবে templateকিছু পুরানো ব্রাউজারগুলিতে সমর্থিত নয়। জানুয়ারী 2018 পর্যন্ত আমি ব্যবহার করতে পারেন ... অনুমান বিশ্বজুড়ে ব্যবহারকারীরা ব্রাউজার যা সমর্থন ব্যবহার করছেন 90% templateগুলি । বিশেষত, ইন্টারনেট এক্সপ্লোরারের কোনও সংস্করণ তাদের সমর্থন করে না; মাইক্রোসফ্ট templateএজ প্রকাশের আগ পর্যন্ত সমর্থন কার্যকর করেনি ।

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

Comments

সুন্দর এক, আধুনিক পদ্ধতি অপেরা-তে পরীক্ষিত, আসুন আইই ভুলে যাই

— আদি প্রসূতিও

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

— শনিফ 22

সুদৃশ্য! আপনি এমন কিছু করে উপাদানগুলির জন্যও জিজ্ঞাসা করতে পারেন: টেম্পলেট.কন্টেন্ট.কোয়ারী নির্বাচনকারী ("img");

— রজার গজরাজ

@ ক্রিসেন্ট ফ্রেশ: যথেষ্ট ভাল, আপনি যেহেতু বলেছিলেন যে এটি এখন অপ্রাসঙ্গিক, আমার ক্ষমাপ্রার্থী আপনি আপনার উত্তরটি শেষ করতে চেয়েছিলেন বলে আমি মনে করি। একটি উত্তম সমঝোতা হ'ল আপনার উত্তরে একটি বিবৃতি যুক্ত করা হবে যা পাঠকদের এই দিকে ইঙ্গিত করে, যেমনটি এখন মেটা নিয়ে আলোচনা করা হয়েছে - আসুন আমরা আশা করি যে সম্পাদনা যুদ্ধ সেখান থেকে ফিরে আসবে না।

— BoltClock

এটির সাথে একটি সমস্যা আছে। আপনার যদি সেখানে শুরু বা শেষের দিকে (!) স্পেস সহ একটি ট্যাগ থাকে, সেগুলি সরিয়ে ফেলা হবে! আমাকে ভুল করবেন না, এটি ফাঁকা স্থানগুলি সম্পর্কে নয় html.trimবরং অভ্যন্তরীণ এইচটিএমএল সেটিংসের অভ্যন্তরীণ পার্সিংয়ের মাধ্যমে। আমার ক্ষেত্রে এটি পাঠ্য নোডের অংশ হয়ে গুরুত্বপূর্ণ স্থানগুলি সরিয়ে দেয়। :-(

— ই-মোটিভ

Answer 3

InsertAdjacentH HTML () ব্যবহার করুন । এটি সমস্ত বর্তমান ব্রাউজারগুলির সাথে, এমনকি আইই ১১ এর সাথেও কাজ করে।

var mylist = document.getElementById('mylist');
mylist.insertAdjacentHTML('beforeend', '<li>third</li>');

<ul id="mylist">
 <li>first</li>
 <li>second</li>
</ul>

Comments

প্রথমত, insertAdjacentHTMLআইই ৪.০ থেকে সমস্ত ব্রাউজারের সাথে কাজ করে।

— জোনাস অ্যাপলগ্রান

দ্বিতীয়ত, এটি দুর্দান্ত! এর তুলনায় একটি বড় প্লাস innerHTML += ...হ'ল এই পদ্ধতিটি ব্যবহার করে পূর্ববর্তী উপাদানগুলির উল্লেখগুলি এখনও অক্ষত।

— জোনাস অ্যাপলগ্রান

প্রথম আর্গুমেন্ট জন্য তৃতীয়ত, সম্ভাব্য মান হল: beforebegin, afterbegin, beforeend, afterend। এমডিএন নিবন্ধটি দেখুন।

— জোনাস অ্যাপলগ্রান

আমার কাছে সেরা উত্তর

— জর্ডান

খুব খারাপ এটি কোনও উপাদান হিসাবে HTML

— োকানো

Answer 4

আরও নতুন ডিওএম বাস্তবায়নগুলি রয়েছে range.createContextualFragment, যা আপনি ফ্রেমওয়ার্ক-স্বতন্ত্রভাবে চান does

এটি ব্যাপকভাবে সমর্থিত। তবে নিশ্চিত হয়ে উঠুন, এটির সামঞ্জস্যতা একই MDN লিঙ্কে নীচে পরীক্ষা করুন, কারণ এটি পরিবর্তন হবে। 2017 সালের মে পর্যন্ত এটি:

Feature         Chrome   Edge   Firefox(Gecko)  Internet Explorer   Opera   Safari
Basic support   (Yes)    (Yes)  (Yes)           11                  15.0    9.1.2

Comments

দ্রষ্টব্য স্থাপনের ক্ষেত্রে innerHTMLএর একইরূপ ঘাটতি রয়েছে; tdএর মতো কিছু উপাদান উপেক্ষা করা হবে এবং ফলস্বরূপ খণ্ডে উপস্থিত হবে না।

— মার্ক অ্যামেরি

"এমন প্রতিবেদন রয়েছে যে ডেস্কটপ সাফারি এক পর্যায়ে রেঞ্জ.ক্রিয়েট কনটেক্সটুয়াল ফ্রেমেন্ট () সমর্থন করেছিল, তবে এটি কমপক্ষে সাফারি 9.0 এবং 9.1 এ সমর্থন করে না।" (উত্তরে MDN লিংক)

— akauppi

Answer 5

কোনও টুইটের দরকার নেই, আপনি একটি নেটিভ এপিআই পেয়েছেন:

const toNodes = html =>
    new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]

Comments

এটি স্বীকৃত উত্তরের মতো একই বড় অসুবিধায় ভুগছে - এটি এইচটিএমএলকে পছন্দ করবে <td>text</td>। এটি কারণ DOMParserএকটি সম্পূর্ণ এইচটিএমএল ডকুমেন্টকে বিশ্লেষণ করার চেষ্টা করা হচ্ছে এবং সমস্ত উপাদান নথির মূল উপাদান হিসাবে বৈধ নয়।

— মার্ক অ্যামেরি

-1 কারণ এটি পূর্বের উত্তরের একটি সদৃশ যা আমার মন্তব্যে উল্লিখিত ত্রুটিগুলি সুস্পষ্টভাবে নির্দেশ করেছে।

— মার্ক

Answer 6

এইচটিএমএল খণ্ডের জন্য যেমন <td>test</td>div.innerHTML, DOMParser.parseFromString এবং range.createContextualFraament (সঠিক প্রসঙ্গ ব্যতীত) অন্যান্য উত্তরগুলিতে এখানে উল্লিখিত সমাধানগুলি <td>উপাদান তৈরি করবে না ।

jQuery.parseHTML () সেগুলি সঠিকভাবে পরিচালনা করে (আমি jQuery 2 এর পার্সএইচটিএমএল ফাংশনটি একটি স্বতন্ত্র ফাংশনে সরিয়ে নিয়েছি যা নন-জিকুরি কোডবেসে ব্যবহার করা যেতে পারে)।

আপনি যদি কেবল এজ 13+ সমর্থন করছেন তবে কেবল HTML5 টেমপ্লেট ট্যাগটি ব্যবহার করা সহজ:

function parseHTML(html) {
    var t = document.createElement('template');
    t.innerHTML = html;
    return t.content.cloneNode(true);
}

var documentFragment = parseHTML('<td>Test</td>');

Answer 7

এটি করার একটি সহজ উপায়:

String.prototype.toDOM=function(){
  var d=document
     ,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment();
  a.innerHTML=this;
  while(i=a.firstChild)b.appendChild(i);
  return b;
};

var foo="<img src='//placekitten.com/100/100'>foo<i>bar</i>".toDOM();
document.body.appendChild(foo);

Comments

@ মার্কআমেরি এখানে পার্থক্যটি হ'ল তিনি একটি টুকরোটি ব্যবহার করে একাধিক মূল উপাদানকে ডিওমে যুক্ত করতে পারেন যা একটি অতিরিক্ত সুবিধা। যদি উইলিয়াম কেবল তার

— উত্তরটিই

Answer 8

আপনি স্ট্রিং থেকে বৈধ ডোম নোডগুলি তৈরি করে এটি ব্যবহার করতে পারেন:

document.createRange().createContextualFragment()

নিম্নলিখিত উদাহরণটি একটি স্ট্রিং থেকে মার্কআপ গ্রহণ করে পৃষ্ঠাতে একটি বোতাম উপাদান যুক্ত করেছে:

let html = '<button type="button">Click Me!</button>';
let fragmentFromString = function (strHTML) {
  return document.createRange().createContextualFragment(strHTML);
}
let fragment = fragmentFromString(html);
document.body.appendChild(fragment);

Comments

যদিও DocumentFragmentএটি একটি অবজেক্ট তৈরি করে , তবুও - এটি আমার দুর্দান্ত আশ্চর্যরূপে - গৃহীত উত্তর হিসাবে একই ত্রুটি ভুগছে: আপনি যদি এটি করেন তবে আপনি document.createRange().createContextualFragment('<td>bla</td>')একটি খণ্ড পান যা কেবল <td>উপাদান ছাড়াই 'ব্লে' লেখা রয়েছে । বা কমপক্ষে, আমি ক্রোম 63 এ এটি পর্যবেক্ষণ করি; আমি সঠিক আচরণটি কিনা তা অনুমান করার জন্য আমি অনুমানের মধ্যে প্রবেশ করি নি।

— মার্ক

Answer 9

প্রোটোটাইপ সহ, আপনি এটিও করতে পারেন:

এইচটিএমএল:

<ul id="mylist"></ul>

জাতীয়:

$('mylist').insert('<li>text</li>');

Comments

এই jQuery হয়? নাকি জেএস?

— জয়া সুরিয়া মুঠুমারী

এটি উল্লিখিত হিসাবে বিল্ট-ইন ডোম পদ্ধতিতে jQuery ব্যবহার করছে।

— হুয়ান হুর্তাদো

@ জুয়ানহুর্তাদো এটি প্রায় 11 বছর আগে ওপি অনুরোধ হিসাবে প্রোটোটাইপজে ব্যবহার করছে;)

— পাবলো বোরোইচজ

Answer 10

আমি এই পদ্ধতিটি ব্যবহার করছি (আইই 9+ এ কাজ করে) যদিও এটি <td>শরীরের কোনও অন্য অবৈধ প্রত্যক্ষ শিশুদের বিশ্লেষণ করবে না :

function stringToEl(string) {
    var parser = new DOMParser(),
        content = 'text/html',
        DOM = parser.parseFromString(string, content);

    // return element
    return DOM.body.childNodes[0];
}

stringToEl('<li>text</li>'); //OUTPUT: <li>text</li>

Answer 11

তদ্ব্যতীত দরকারী। টোডম () স্নিপেট যা আমরা বিভিন্ন জায়গায় খুঁজে পেতে পারি সেগুলি বাড়ানোর জন্য , আমরা এখন নিরাপদে ব্যাকটিক্স ( টেম্পলেট লিটারাল ) ব্যবহার করতে পারি ।

সুতরাং আমরা foo এইচটিএমএল ঘোষণায় একক এবং ডাবল উদ্ধৃতি পেতে পারি ।

এই শব্দটির সাথে পরিচিতদের জন্য এটি হেরিডোকসের মতো আচরণ করে।

জটিল টেম্পলেটিং তৈরি করতে ভেরিয়েবলগুলির সাথে এটি আরও বাড়ানো যেতে পারে:

টেম্পলেট লিটারালগুলি ডাবল বা একক উদ্ধৃতির পরিবর্তে ব্যাক-টিক ( ) (গুরুতর উচ্চারণ) অক্ষর দ্বারা আবদ্ধ । টেম্পলেট আক্ষরিক স্থানধারক থাকতে পারে। এগুলি ডলারের চিহ্ন এবং কোঁকড়ানো ধনুর্বন্ধনী ($ {প্রকাশ}) দ্বারা নির্দেশিত হয়। স্থানধারকগুলির মধ্যে প্রকাশ এবং তাদের মধ্যে থাকা পাঠ্য কোনও ফাংশনে পৌঁছে যায়। ডিফল্ট ফাংশনটি কেবল অংশগুলিকে একক স্ট্রিংয়ে যুক্ত করে। যদি এখানে টেমপ্লেটটি আক্ষরিক (এখানে ট্যাগ করা) পূর্ববর্তী কোনও অভিব্যক্তি থাকে তবে এটিকে "ট্যাগযুক্ত টেম্পলেট" বলা হয়। সেক্ষেত্রে ট্যাগ এক্সপ্রেশন (সাধারণত একটি ফাংশন) প্রসেসড টেম্পলেটটি আক্ষরিক সাথে ডাকা হয়, যা আপনি আউটপুট দেওয়ার আগে ম্যানিপুলেট করতে পারেন। আক্ষরিক টেম্পলেটে কোনও ব্যাক-টিক থেকে বাঁচতে, ব্যাক-টিকের আগে একটি ব্যাকস্ল্যাশ লাগান।

String.prototype.toDOM=function(){
  var d=document,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment()
  a.innerHTML = this
  while(i=a.firstChild)b.appendChild(i)
  return b
}

// Using template litterals
var a = 10, b = 5
var foo=`
<img 
  onclick="alert('The future start today!')"   
  src='//placekitten.com/100/100'>
foo${a + b}
  <i>bar</i>
    <hr>`.toDOM();
document.body.appendChild(foo);

img {cursor: crosshair}

তো, সরাসরি ব্যবহার করবেন না কেন .innerHTML +=? এটি করে, পুরো ডিওএমটি ব্রাউজারের দ্বারা পুনরায় গণনা করা হচ্ছে, এটি অনেক ধীর।

https://caniuse.com/template-literals

Answer 12

আমি একটি Documentপ্রোটোটাইপ যুক্ত করেছি যা স্ট্রিং থেকে একটি উপাদান তৈরি করে:

Document.prototype.createElementFromString = function (str) {
    const element = new DOMParser().parseFromString(str, 'text/html');
    const child = element.documentElement.querySelector('body').firstChild;
    return child;
};

Comments

মনে রাখবেন যে - এই পৃষ্ঠায় অন্য কোথাও উল্লেখ করা হয়েছে - এটি tdএর জন্য কাজ করবে না ।

— মার্ক

Answer 13

এইচটিএমএল 5 এবং ইএস 6

<template>

ডেমো

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @description HTML5 Template
 * @augments
 * @example
 *
 */

/*

<template>
    <h2>Flower</h2>
    <img src="https://www.w3schools.com/tags/img_white_flower.jpg">
</template>


<template>
    <div class="myClass">I like: </div>
</template>

*/

const showContent = () => {
    // let temp = document.getElementsByTagName("template")[0],
    let temp = document.querySelector(`[data-tempalte="tempalte-img"]`),
        clone = temp.content.cloneNode(true);
    document.body.appendChild(clone);
};

const templateGenerator = (datas = [], debug = false) => {
    let result = ``;
    // let temp = document.getElementsByTagName("template")[1],
    let temp = document.querySelector(`[data-tempalte="tempalte-links"]`),
        item = temp.content.querySelector("div");
    for (let i = 0; i < datas.length; i++) {
        let a = document.importNode(item, true);
        a.textContent += datas[i];
        document.body.appendChild(a);
    }
    return result;
};

const arr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];

if (document.createElement("template").content) {
    console.log("YES! The browser supports the template element");
    templateGenerator(arr);
    setTimeout(() => {
        showContent();
    }, 0);
} else {
    console.error("No! The browser does not support the template element");
}

@charset "UTf-8";

/* test.css */

:root {
    --cololr: #000;
    --default-cololr: #fff;
    --new-cololr: #0f0;
}

[data-class="links"] {
    color: white;
    background-color: DodgerBlue;
    padding: 20px;
    text-align: center;
    margin: 10px;
}

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Template Test</title>
    <!--[if lt IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
    <section>
        <h1>Template Test</h1>
    </section>
    <template data-tempalte="tempalte-img">
        <h3>Flower Image</h3>
        <img src="https://www.w3schools.com/tags/img_white_flower.jpg">
    </template>
    <template data-tempalte="tempalte-links">
        <h3>links</h3>
        <div data-class="links">I like: </div>
    </template>
    <!-- js -->
</body>

</html>

Answer 14

দেরীতে কিন্তু ঠিক একটি নোট হিসাবে;

কোনও ধারক হিসাবে উপাদানটিকে টার্গেট করার জন্য একটি তুচ্ছ উপাদান যুক্ত করা এবং এটি ব্যবহারের পরে মুছে ফেলা সম্ভব।

// ক্রোম 23.0, ফায়ারফক্স 18.0, অর্থাৎ 7-8-9 এবং অপেরা 12.11 এ পরীক্ষিত।

<div id="div"></div>

<script>
window.onload = function() {
    var foo, targetElement = document.getElementById('div')
    foo = document.createElement('foo')
    foo.innerHTML = '<a href="#" target="_self">Text of A 1.</a> '+
                    '<a href="#" onclick="return !!alert(this.innerHTML)">Text of <b>A 2</b>.</a> '+
                    '<hr size="1" />'
    // Append 'foo' element to target element
    targetElement.appendChild(foo)

    // Add event
    foo.firstChild.onclick = function() { return !!alert(this.target) }

    while (foo.firstChild) {
        // Also removes child nodes from 'foo'
        targetElement.insertBefore(foo.firstChild, foo)
    }
    // Remove 'foo' element from target element
    targetElement.removeChild(foo)
}
</script>

Answer 15

স্ট্রিং থেকে ডিওএম রেন্ডারে দ্রুততম সমাধান:

let render = (relEl, tpl, parse = true) => {
  if (!relEl) return;
  const range = document.createRange();
  range.selectNode(relEl);
  const child = range.createContextualFragment(tpl);
  return parse ? relEl.appendChild(child) : {relEl, el};
};

এবং আপনি এখানে DOM ম্যানিপুলেশন প্রতিক্রিয়া বনাম নেটিভ জেএসের জন্য কর্মক্ষমতা পরীক্ষা করতে পারেন

এখন আপনি সহজভাবে ব্যবহার করতে পারেন:

let element = render(document.body, `
<div style="font-size:120%;line-height:140%">
  <p class="bold">New DOM</p>
</div>
`);

এবং অবশ্যই অদূর ভবিষ্যতে আপনি মেমরির কারণগুলি থেকে উল্লেখগুলি ব্যবহার করেন "উপাদান" আপনার নথিতে আপনার নতুন নির্মিত ডিওএম।

এবং মনে রাখবেন "অভ্যন্তরীণ এইচটিএমএল =" খুব ধীর: /

Answer 16

এখানে আমার কোড এবং এটি কার্যকর:

function parseTableHtml(s) { // s is string
    var div = document.createElement('table');
    div.innerHTML = s;

    var tr = div.getElementsByTagName('tr');
    // ...
}

Comments

যদি উপাদানটি তৈরি করা যায় তবে সে নিজেই একটি টেবিল হয় ails

— মার্ক আমেরি

Answer 17

এটির হেকের জন্য আমি ভেবেছিলাম আমি এটিকে জটিল কিন্তু এত সহজ পদ্ধতির সাথে ভাগ করে নিচ্ছি ... সম্ভবত কেউ দরকারী কিছু খুঁজে পাবে।

/*Creates a new element - By Jamin Szczesny*/
function _new(args){
    ele = document.createElement(args.node);
    delete args.node;
    for(x in args){ 
        if(typeof ele[x]==='string'){
            ele[x] = args[x];
        }else{
            ele.setAttribute(x, args[x]);
        }
    }
    return ele;
}

/*You would 'simply' use it like this*/

$('body')[0].appendChild(_new({
    node:'div',
    id:'my-div',
    style:'position:absolute; left:100px; top:100px;'+
          'width:100px; height:100px; border:2px solid red;'+
          'cursor:pointer; background-color:HoneyDew',
    innerHTML:'My newly created div element!',
    value:'for example only',
    onclick:"alert('yay')"
}));

Answer 18

নেটিভ জেএস দিয়ে কেন করবেন না?

    var s="<span class='text-muted' style='font-size:.75em; position:absolute; bottom:3px; left:30px'>From <strong>Dan's Tools</strong></span>"
    var e=document.createElement('div')
    var r=document.createRange();
    r.selectNodeContents(e)
    var f=range.createContextualFragment(s);
    e.appendChild(f);
    e = e.firstElementChild;

Answer 19

function domify (str) {
  var el = document.createElement('div');
  el.innerHTML = str;

  var frag = document.createDocumentFragment();
  return frag.appendChild(el.removeChild(el.firstChild));
}

var str = "<div class='foo'>foo</div>";
domify(str);

Answer 20

"HTML" পাঠ্যটিকে উপাদানটিতে রূপান্তর করতে আপনি নীচের ফাংশনটি ব্যবহার করতে পারেন

function htmlToElement(html)
{
  var element = document.createElement('div');
  element.innerHTML = html;
  return(element);
}
var html="<li>text and html</li>";
var e=htmlToElement(html);

Comments

-1; এটি একই কৌশল যেমন গ্রহণযোগ্য উত্তরে প্রস্তাবিত এবং একই ত্রুটি রয়েছে - উল্লেখযোগ্যভাবে, tdএস এর জন্য কাজ করা নয় ।

— মার্ক

Answer 21

var jtag = $j.li({ child:'text' }); // Represents: <li>text</li>
var htmlContent = $('mylist').html();
$('mylist').html(htmlContent + jtag.html());

জেনারেটর ব্যবহার করুন

Answer 22

এখানে আমার জন্য কোডিং কাজ

আমি ' পাঠ্য ' স্ট্রিংটি এইচটিএমএল উপাদানে রূপান্তর করতে চেয়েছিলাম

var diva = UWA.createElement('div');
diva.innerHTML = '<a href="http://wwww.example.com">Text</a>';
var aelement = diva.firstChild;

Comments

কী wwww?

— টিনটিন 81

Answer 23

var msg = "পরীক্ষা" jQuery.parseHTML (msg)

Comments

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

— ডিভিউইজ

Answer 24

এটিও কাজ করবে:

$('<li>').text('hello').appendTo('#mylist');

শৃঙ্খলিত ফাংশন কলগুলির সাথে এটি আরও জ্যাকোরির মতো মনে হয়।

Comments

এটি jQuery বলে এটি কি jQuery এর মতো মনে হচ্ছে?

— টিম ফেরেল

শেষ লাইনটি কেবল হাসিখুশি!

— কুমারহর্ষ