আমি কীভাবে নিয়মিত জাভাস্ক্রিপ্ট প্রিপেন্ড এবং সংযোজন করতে পারি?

Question

আমি কীভাবে jQuery ব্যবহার না করে নিয়মিত জাভাস্ক্রিপ্টের সাথে প্রিপেন্ড এবং সংযোজন করতে পারি ?

Comments

তুমি কী বলতে চাচ্ছ আমি বুঝতে পারছি না।

— পেক্কা

@ জেনেরিক টাইপটিয়া: আমি কি প্রায় একই সময়ে করেছি ... আমি এখনই এটি একা ছেড়ে যাব!

— মার্ক বাইয়ার্স

@ মার্ক - আপনার সম্পাদনাটি আরও ভাল ছিল :)।

— djdd87

Answer 1

সম্ভবত আপনি ডিওএম পদ্ধতি appendChild এবং সম্পর্কে জিজ্ঞাসা করছেন insertBefore।

parentNode.insertBefore(newChild, refChild)

বিদ্যমান শিশু নোডের আগে newChildশিশু হিসাবে নোড সন্নিবেশ করান । (রিটার্নস ।)parentNoderefChildnewChild

যদি refChildনাল newChildহয় তবে বাচ্চাদের তালিকার শেষে যুক্ত করা হয়। সমানভাবে এবং আরও সহজেই ব্যবহারযোগ্য parentNode.appendChild(newChild)।

Comments

সুতরাং প্রিপেন্ড মূলত এটি তখনfunction prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); }

— মুহাম্মাদ উমর

Answer 2

আপনাকে যেতে এখানে একটি স্নিপেট রয়েছে:

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.innerHTML = 'Are we there yet?';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

theParent.firstChildআমাদের মধ্যে প্রথম উপাদানটির একটি রেফারেন্স দেবে theParentএবং theKidএটির সামনে রাখবে ।

Comments

ধন্যবাদ, প্রিপেন্ডের জন্য কেন অতিরিক্ত ডিভ তৈরি না করে কেবল ইনসার্টব্রেটার ব্যবহার করুন? গ্রুমড্রিগ উত্তর মত?

— ইউসুফ

এটি একটি উপাদান তৈরি করে এবং এটি ডোমে যুক্ত করে, আলাদাভাবে কাজ সংযোজন এবং সংশোধন করে

— আন্দ্রে ক্রিশ্চিয়ান প্রোডান

আমি গ্রুমডিগের উত্তরের তুলনায় এটি পেয়েছি

— অ্যান্ড্রু

এটি 2015. আমরা এখনও একটি বিল্ট ইন prepend()পদ্ধতিতে থাকতে পারি ?

— 1.21 গিগাওয়াট

Node.append বা node.appendChild অকার্যকর পদ্ধতি, ব্যবহার insertBefore (নোড, নাল) পরিবর্তে

— Suhayb

Answer 3

আপনি আমাদের এখানে যেতে বেশি কিছু দেননি, তবে আমার মনে হয় আপনি কোনও উপাদানটির শুরু বা শেষের দিকে কীভাবে সামগ্রী যুক্ত করবেন? যদি তাই হয় তবে আপনি কীভাবে খুব সহজে এটি করতে পারেন তা এখানে:

//get the target div you want to append/prepend to
var someDiv = document.getElementById("targetDiv");

//append text
someDiv.innerHTML += "Add this text to the end";

//prepend text
someDiv.innerHTML = "Add this text to the beginning" + someDiv.innerHTML;

বেশ সহজ.

Comments

খুব ভাল, আমি যা খুঁজছিলাম।

— আন্দ্রে ক্রিশ্চিয়ান প্রোডান

@ মুন্জিলা এই পদ্ধতিটি ব্রাউজারকে সমস্ত বিদ্যমান বাচ্চাদের আবার পার্স করতে বাধ্য করবে। উপরের সমাধানগুলিতে ব্রাউজারকে কেবলমাত্র প্রদত্ত শিশুটিকে নথিতে সংযুক্ত করতে হবে।

— সায়াম কাজী

Answer 4

আপনি যতই জটিল কোনও কাঁচা এইচটিএমএল স্ট্রিং toোকাতে চান তবে আপনি insertAdjacentHTMLউপযুক্ত প্রথম যুক্তি সহ : ব্যবহার করতে পারেন :

উপাদানটির আগে ' পূর্বে ' 'afterbegin' উপাদানটির ভিতরে তার প্রথম সন্তানের ঠিক আগে। উপাদানটির ঠিক শেষের সন্তানের পরে 'পূর্বে' 'আফটারেন্ড' পরে উপাদানটি নিজেই।

ইঙ্গিত: আপনি সর্বদা Element.outerHTMLএইচটিএমএল স্ট্রিংটি উপাদানটি toোকানোর জন্য প্রতিনিধিত্ব করতে কল করতে পারেন।

ব্যবহারের একটি উদাহরণ:

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

ডেমো

সাবধানতা: insertAdjacentHTML শ্রোতার সাথে সংরক্ষণ করা হয় না যেখানে সংযুক্ত .addEventLisntener।

Comments

" insertAdjacentHTMLশ্রোতা সংরক্ষণ করে না ..." শ্রোতা কি? এটি এইচটিএমএল, সুতরাং বাঁধাই করার জন্য এখনও কোনও উপাদান নেই। যদি আপনি ভিতরে বিদ্যমান উপাদানগুলির উল্লেখ করে থাকেন fooতবে এটি সত্য বক্তব্য নয়। পুরো বিষয়টি .insertAdjacentHTMLহ'ল এটি শ্রোতাদের সংরক্ষণ করে । আপনি হয়ত ভাবছেন .innerHTML += "...", যা পুরাতন ডোম নোডগুলি ধ্বংস করে।

— স্প্যাঙ্কি

@ স্পাঙ্কি আপনারা ঠিক বলেছেন যে বক্তব্যটি একাধিক উপায়ে ব্যাখ্যা করা যেতে পারে, আমি যেটা বলতে চেয়েছিলাম তা হ'ল ডম নোডগুলি নতুনভাবে তৈরি করা হয়েছিল insertAdjacentHTML(মূলের বা মূলের বংশধর নয়)

— শিল্পী

Answer 5

আমি এটি আমার প্রকল্পে যুক্ত করেছি এবং এটি কাজ করে বলে মনে হচ্ছে:

HTMLElement.prototype.prependHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    this.insertBefore(div, this.firstChild);
};

HTMLElement.prototype.appendHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    while (div.children.length > 0) {
        this.appendChild(div.children[0]);
    }
};

উদাহরণ:

document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);

Answer 6

আপনার জীবন সহজ করার জন্য আপনি HTMLElementঅবজেক্টটি প্রসারিত করতে পারেন । এটি পুরানো ব্রাউজারগুলির জন্য কাজ না করে, তবে অবশ্যই আপনার জীবনকে সহজ করে তোলে:

HTMLElement = typeof(HTMLElement) != 'undefined' ? HTMLElement : Element;

HTMLElement.prototype.prepend = function(element) {
    if (this.firstChild) {
        return this.insertBefore(element, this.firstChild);
    } else {
        return this.appendChild(element);
    }
};

সুতরাং পরের বার আপনি এটি করতে পারেন:

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);

Comments

নোডের কোনও শিশু নোড না থাকলে কী হবে? সেক্ষেত্রে ফার্স্টচিল্ডটি শূন্য হবে

— felixfbecker

প্রিপেন্ড ইতিমধ্যে বিদ্যমান, প্যারেন্টনোড.প্রিপেন্ড () দেখুন, তাই প্রিপেন্ডচিল্ড তৈরি করতে প্রেন্ট.প্রিপেন্ড (chld) কল করা যথেষ্ট

— ইগোর ফোমেনকো

Answer 7

দস্তাবেজটিতে একটি অনুচ্ছেদ যুক্ত করতে প্রিপেন্ড ব্যবহার করার উদাহরণ এখানে।

var element = document.createElement("p");
var text = document.createTextNode("Example text");
element.appendChild(text);
document.body.prepend(element);

ফলাফল:

<p>Example text</p>

Answer 8

2017 সালে আমি এজ 15 এবং আইই 12 এর জন্য জানি, প্রিপেন্ড পদ্ধতিটি ডিভ উপাদানগুলির সম্পত্তি হিসাবে অন্তর্ভুক্ত হয় না, তবে কারও যদি পলফিলের জন্য দ্রুত রেফারেন্সের প্রয়োজন হয় তবে আমি এটি তৈরি করেছি:

 HTMLDivElement.prototype.prepend = (node, ele)=>{ 
               try { node.insertBefore(ele ,node.children[0]);} 
                     catch (e){ throw new Error(e.toString()) } }

সর্বাধিক আধুনিক ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ সহজ তীর ফাংশন।

Answer 9

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

যদি রেফারেন্স এলিমেন্টটি নাল, বা সংজ্ঞায়িত হয় তবে শিশু নোডগুলির তালিকার শেষে নতুন এলিমেন্টটি সন্নিবেশ করা হবে।

insertedElement The node being inserted, that is newElement
parentElement The parent of the newly inserted node.
newElement The node to insert.
referenceElement The node before which newElement is inserted.

উদাহরণগুলি এখানে পাওয়া যাবে: নোড ইন্ডিট্রেটব্রোটার আগে

Answer 10

আপনি একটি তালিকাতে পুনরায় চাপতে আনশিফ্ট () ব্যবহার করতে পারেন

Answer 11

এটি করার সর্বোত্তম উপায় নয় তবে যদি কেউ সবার আগে কোনও উপাদান anোকাতে চায় তবে এখানে একটি উপায়।

var newElement = document.createElement("div");
var element = document.getElementById("targetelement");
element.innerHTML = '<div style="display:none !important;"></div>' + element.innerHTML;
var referanceElement = element.children[0];
element.insertBefore(newElement,referanceElement);
element.removeChild(referanceElement);