வணக்கம்! ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி, நீங்கள் ஒரு பக்கத்தில் உள்ள உறுப்புகளைக் கண்டறிவது மட்டுமல்லாமல் (இதை எப்படி செய்வது என்பதைப் பற்றி படிக்கவும்) ஆனால் உறுப்புகளை மாறும் வகையில் உருவாக்கி அவற்றை DOM இல் சேர்க்கலாம். இதை எப்படி செய்வது என்பது இந்த பாடத்தில் விவாதிக்கப்படும்.

உருவாக்குவதற்காக புதிய உறுப்புஒரு வலைப்பக்கத்தில் - ஆவணப் பொருள் பின்வரும் முறைகளைக் கொண்டுள்ளது:

• createElement(elementName) : ஒரு புதிய உறுப்பை உருவாக்குகிறது, எந்த HTML பக்க குறிச்சொல்லும் அளவுருவாக அனுப்பப்பட வேண்டும், HTML உறுப்பை வழங்கும்
• createTextNode(text) : ஒரு உரை முனையை உருவாக்கி அதையே திருப்பித் தருகிறது.

ஒரு உறுப்பு சேர்த்தல்

ஒரு சிறிய உதாரணத்தைப் பார்ப்போம்:

Var el = document.createElement("div"); var elText = document.createTextNode("Hello world");

நீங்கள் எடுத்துக்காட்டில் இருந்து பார்க்க முடியும் என, elem மாறி புதிய div உறுப்புக்கான இணைப்பைச் சேமிக்கும். இருப்பினும், நீங்கள் புரிந்து கொண்டபடி, கூறுகளை உருவாக்குவது போதாது, அவை இன்னும் வலைப்பக்கத்தில் சேர்க்கப்பட வேண்டும். எல்லாவற்றிற்கும் மேலாக, நாம் இந்த வழியில் கூறுகளை உருவாக்கும்போது, ​​அவை ஒருவித மெய்நிகர் இடத்தில் அல்லது நினைவகத்தில் இருப்பதாகத் தெரிகிறது, ஆனால் அவற்றை ஒரு வலைப்பக்கத்தில் காண்பிக்க, சிறப்பு முறைகள் உள்ளன.

வலைப்பக்கத்தில் கூறுகளைச் சேர்க்க பின்வரும் முறைகள் பயன்படுத்தப்படுகின்றன:

• appendChild(newNode) : இந்த முறை அழைக்கப்பட்ட உறுப்பின் முடிவில் ஒரு புதிய உறுப்பைச் சேர்க்கிறது
• insertBefore(newNode, referenceNode) : இரண்டாவது அளவுருவாகக் குறிப்பிடப்பட்ட முனைக்கு முன் ஒரு புதிய முனையைச் சேர்க்கிறது.

appendChild முறையைப் பயன்படுத்தி ஒரு உறுப்பை வலைப்பக்கத்தில் இணைப்பதற்கான உதாரணத்தைப் பார்ப்போம்:

கட்டுரை தலைப்பு

முதல் பத்தி

இரண்டாவது பத்தி

var கட்டுரை = document.querySelector("div.article"); // ஒரு உறுப்பை உருவாக்கு var el = document.createElement("h3"); // அதற்கான உரையை உருவாக்கவும் var elTxt = document.createTextNode("Hello world"); //உறுப்புக்கு உரையைச் சேர் ஒரு குழந்தை உறுப்பு el.appendChild(elTxt); // div தொகுதி கட்டுரையில் ஒரு உறுப்பைச் சேர்க்கவும்.appendChild(el);

எடுத்துக்காட்டு ஒரு சாதாரண h3 தலைப்பு உறுப்பு மற்றும் உரை முனையை உருவாக்கியது. உரை முனை பின்னர் தலைப்பு உறுப்புடன் சேர்க்கப்படும். தலைப்பு பின்னர் வலைப்பக்க உறுப்புகளில் ஒன்றில் சேர்க்கப்படும், இதனால் அதை பக்கத்தில் காணலாம்.

ஆனால் ஒரு உறுப்புக்குள் உரையை உருவாக்க கூடுதல் உரை முனையை வைத்திருக்க வேண்டிய அவசியமில்லை;

Var el = document.createElement("h3"); el.textContent = "ஹாய் நான் தான் தலைப்பு";

இந்த வழக்கில், உரையை நேரடியாக அமைக்கும் போது உரை மறைமுகமாக உருவாக்கப்படும்.

மேலும் இந்த உறுப்பை ஒரு div இன் சைல்டு நோட்களின் தொகுப்பின் தொடக்கத்தில் எவ்வாறு சேர்ப்பது என்பதையும் பார்க்கலாம்:

Var artDiv = document.querySelector("div.article"); // ஒரு உறுப்பை உருவாக்கு var el = document.createElement("h2"); // அதற்கான உரையை உருவாக்கவும் var eltxt = document.createTextNode("Hello world"); //உறுப்புக்கு உரையைச் சேர் ஒரு குழந்தை உறுப்பு el.appendChild(eltxt); // var firstEl = artDiv.firstChild.nextSibling சேர்ப்பால் முன் வரும் முதல் உறுப்பைப் பெறுங்கள்; // முதல் முனை artDiv.insertBefore(el, firstEl) க்கு முன் div தொகுதியில் ஒரு உறுப்பைச் சேர்க்கவும்;

நீங்கள் திடீரென்று இரண்டாவது, மூன்றாவது அல்லது வேறு எந்த இடத்திலும் ஒரு புதிய முனையைச் சேர்க்க வேண்டும் என்றால், அதற்கு முன் நீங்கள் அதைச் செருக வேண்டிய முனையைக் கண்டுபிடிக்க வேண்டும், பின்வரும் முதல் குழந்தை/கடைசி குழந்தை அல்லது அடுத்த உடன்பிறப்பு/முந்தைய உடன்பிறப்புகளைப் பயன்படுத்தி அதைச் செருக வேண்டும்.

ஒரு உறுப்பை நகலெடுக்கிறது

கூறுகள் கலவையில் மிகவும் சிக்கலானதாக இருக்கும் சூழ்நிலைகள் உள்ளன, மேலும் அவற்றை நகலெடுப்பது எளிது. இதற்கு தனி குளோன்நோட்() முறை பயன்படுத்தப்படுகிறது.

Var artDiv = document.querySelector("div.article"); // கட்டுரைDiv உறுப்பு var newArtDiv = artDiv.cloneNode(true); // உடல் உறுப்பு ஆவணத்தின் முடிவில் சேர்க்கவும்.body.appendChild(newArtDiv);

குளோன்நோட்() முறைக்கு நீங்கள் பூலியன் மதிப்பை அளவுருவாக அனுப்ப வேண்டும்: நீங்கள் உண்மையை அனுப்பினால், உறுப்பு அனைத்து சைல்டு நோட்களுடன் நகலெடுக்கப்படும்; நீங்கள் தவறாக அனுப்பினால், அது குழந்தை முனைகள் இல்லாமல் நகலெடுக்கப்படும். IN இந்த எடுத்துக்காட்டில்உறுப்பை அதன் உள்ளடக்கங்களுடன் நகலெடுத்து இணையப் பக்கத்தின் முடிவில் சேர்க்கிறோம்.

ஒரு உறுப்பு நீக்குதல்

ஒரு உறுப்பை அகற்ற, நீங்கள் removeChild() முறையை அழைக்க வேண்டும். இந்த முறை குழந்தை முனைகளில் ஒன்றை அகற்றும்:

Var artDiv = document.querySelector("div.article"); //நாம் நீக்கும் முனையைக் கண்டறியவும் - முதல் பத்தி var removNode = document.querySelectorAll("div.article p"); // முனையை அகற்று artDiv.removeChild(removNode);

இந்த உதாரணம் முதல் பத்தியை div பிளாக்கிலிருந்து அகற்றும்

ஒரு உறுப்பை மாற்றுதல்

ஒரு உறுப்பை மற்றொரு உறுப்புடன் மாற்ற, ரீப்ளேஸ்சைல்ட்(புதியநோட், பழையநோட்) முறையைப் பயன்படுத்தவும். இந்த முறை ஒரு புதிய உறுப்பை 1 வது அளவுருவாக எடுத்துக்கொள்கிறது, இது பழைய உறுப்பை 2 வது அளவுருவாக மாற்றுகிறது.

Var artDiv = document.querySelector("div.article"); // நாம் மாற்றும் முனையைக் கண்டறியவும் - முதல் பத்தி var பழைய = document.querySelectorAll("div.article p"); // ஒரு உறுப்பை உருவாக்கு var new = document.createElement("h3"); // அதற்கான உரையை உருவாக்கவும் var elemtxt = document.createTextNode("Hello world"); // உறுப்பில் உரையைச் சேர் குழந்தை உறுப்பு new.appendChild(elemtxt); // பழைய முனையை புதிய ஒன்றைக் கொண்டு மாற்றவும் artDiv.replaceChild(புதிய, பழைய);

இந்த எடுத்துக்காட்டில், நாம் உருவாக்கிய h2 தலைப்புடன் முதல் பத்தியை மாற்றுவோம்.

முடிவுகள்.

ஒரு உறுப்பை உருவாக்க, பின்வரும் முறைகள் பயன்படுத்தப்படுகின்றன:

document.createElement(tag) - ஒரு புதிய உறுப்பை உருவாக்குகிறது.

document.createTextNode(text) - உரை முனையை உருவாக்குகிறது

முனைகளைச் செருகுவதற்கும் அகற்றுவதற்கும் முறைகள்

• parent.appendChild(el) - ஏற்கனவே உள்ள உறுப்பின் முடிவில் ஒரு உறுப்பைச் சேர்க்கிறது
• parent.insertBefore(el, nextSibling) - ஏற்கனவே உள்ள உறுப்புக்கு முன் ஒரு உறுப்பைச் செருகுகிறது
• parent.removeChild(el) - ஒரு உறுப்பை நீக்குகிறது
• parent.replaceChild(newElem, el) - ஒரு உறுப்பை மற்றொரு உறுப்புடன் மாற்றுகிறது
• parent.cloneNode(bool) - ஒரு உறுப்பை நகலெடுக்கிறது, அளவுரு bool=true எனில், உறுப்பு அனைத்து குழந்தை உறுப்புகளுடனும் நகலெடுக்கப்படும், மேலும் தவறு என்றால் குழந்தை உறுப்புகள் இல்லாமல்

உறுப்புகளைச் செருகுவதற்கான பணிகள் செயல்பாடு

ஒரு செயல்பாட்டைச் செருகியபின்(newEl,oldEl) எழுதவும், அது ஒரு உறுப்புக்குப் பின் மற்றொன்றைச் செயல்பாட்டிற்குள் நுழைக்கிறது, உறுப்புகளே அளவுருக்களாக அனுப்பப்படுகின்றன.

நீங்கள் எப்போதாவது ஜாவாஸ்கிரிப்டை எழுதியிருந்தால், இது போன்ற ஏதாவது எழுத வேண்டும்:
var p = document.createElement("p");
p.appendChild(document.createTextNode("உண்மையான மீன் மீன்."));
var div = document.createElement("div");
div.setAttribute("id", "new");
div.appendChild(p);

இது உங்களுக்கு பயனுள்ளதாக இருக்கும்.

சிக்கல்: ஒன்றுக்கு மேற்பட்ட உறுப்புகளை ஒன்றோடொன்று உள்ளமைக்கும்போது, ​​குறியீடு மிகவும் சிக்கலானதாகிறது.

சிக்கலைத் தீர்ப்பதற்கான எளிய கருவியை நான் வழங்குகிறேன் - உருவாக்கு() செயல்பாடு (கீழே உள்ள மூல குறியீடு). எடுத்துக்காட்டாக, உரையின் பத்தியை உருவாக்குவோம்:
var el = உருவாக்கு("p", ( ), "பிரியாவிடை, காதல்!");

அல்லது ஒரு பத்தி மற்றும் அதன் உள்ளே ஒரு இணைப்பைக் கொண்ட ஒரு div:
var div = உருவாக்கு("div", ( id: "new", style: "background:#fff" ),
உருவாக்கு("p", ( சீரமை: "மையம்" ),
"அறிமுகம்:",
உருவாக்கு("a", ( href: "ua.fishki.net/picso/kotdavinchi.jpg" ),
"படம்"),
": முடிவு")
);

அல்லது இங்கே நாம் ஒரு அட்டவணையை உருவாக்குகிறோம்:
var வைத்திருப்பவர் = document.getElementById("holder2");
var அட்டவணை;
var td;
holder.appendChild(
அட்டவணை =
உருவாக்கு("அட்டவணை", (ஐடி: "அசிங்கமான", cols:3),
உருவாக்கு("tbody", (),
உருவாக்கு("tr", (),
உருவாக்கு("td", (அகலம்: "10%" ),
"வணக்கம்")
td =
உருவாக்கு("td", (நடை: "பின்னணி: #fcc" ),
"அங்கே")
உருவாக்கு("டிடி", ( வகுப்பு: "சிறப்பு2"), "எல்லா இடங்களிலும்")
)
);

தயவுசெய்து கவனிக்கவும்: 1. IEக்கு tbody உறுப்பு தேவை, இல்லையெனில் அது அட்டவணையைக் காட்ட மறுக்கும்.
2. class பண்புக்கூறு ஏதோவொன்றுடன் முரண்படுகிறது, எனவே நீங்கள் அதை Class என எழுத வேண்டும். இது முடிவில் எந்த விளைவையும் ஏற்படுத்துவதாகத் தெரியவில்லை.
3. அட்டவணை = மற்றும் tr = எடுத்துக்காட்டில், உருவாக்கப்பட்ட உள்ளமை பொருட்களை அவற்றுடன் மேலும் வேலை செய்ய சேமிக்க உங்களை அனுமதிக்கிறது.
4. இந்த குறியீடு IE, Mozilla மற்றும் Opera ஆகியவற்றில் வேலை செய்கிறது (பெயர், பண்புக்கூறுகள்) செயல்பாடு.
var el = document.createElement(name);
என்றால் (பண்பு வகை == "பொருள்") (
(பண்புகளில் var i) (
el.setAttribute(i, பண்புக்கூறுகள்[i]);

என்றால் (i.toLowerCase() == "வகுப்பு") (
el.className = பண்புக்கூறுகள்[i]; // IE இணக்கத்தன்மைக்கு

) இல்லையெனில் (i.toLowerCase() == "ஸ்டைல்") (
el.style.cssText = பண்புக்கூறுகள்[i]; // IE இணக்கத்தன்மைக்கு
}
}
}
(var i = 2;i< arguments.length; i++) {
var val = வாதங்கள்[i];
என்றால் (val == "string") (val = document.createTextNode(val) );
el.appendChild(val);
}
திரும்ப எல்;
}

இந்த யோசனைக்கு இவான் குர்மானோவ் நன்றி சொல்ல வேண்டும்.
வேலை செய்யும் எடுத்துக்காட்டுகளுடன் அசல் கட்டுரை:

js உறுப்பை அகற்று (12)

படி 1. கூறுகளைத் தயாரிக்கவும்:

var உறுப்பு = document.getElementById("ElementToAppendAfter"); var newElement = document.createElement("div"); var elementParent = உறுப்பு.parentNode;

படி 2. பின் சேர்:

elementParent.insertBefore(newElement, element.nextSibling);

ஜாவாஸ்கிரிப்ட்டில் செருகுவதற்கு முன்() உள்ளது, ஆனால் நான் ஒரு உறுப்பை எவ்வாறு செருகுவது பிறகு jQuery அல்லது மற்றொரு நூலகத்தைப் பயன்படுத்தாமல் மற்றொரு உறுப்பு?

நேரடியான ஜாவாஸ்கிரிப்ட் இருக்கும்:

கூட்டு:

Element.parentNode.insertBefore(newElement, உறுப்பு);

பின் சேர்:

Element.parentNode.insertBefore(newElement, element.nextSibling);

ஆனால், பயன்பாட்டின் எளிமைக்காக சில முன்மாதிரிகளை அங்கே எறியுங்கள்

பின்வரும் முன்மாதிரிகளை உருவாக்குவதன் மூலம், புதிதாக உருவாக்கப்பட்ட உறுப்புகளிலிருந்து நேரடியாக இந்தச் செயல்பாட்டை நீங்கள் அழைக்க முடியும்.

newElement.appendBefore(உறுப்பு);

newElement.appendAfter(உறுப்பு);

.appendBefore(உறுப்பு) முன்மாதிரி

Element.prototype.appendBefore = செயல்பாடு (உறுப்பு) ( element.parentNode.insertBefore(இது, உறுப்பு); ),தவறு;

.appendAfter(உறுப்பு)முன்மாதிரி

Element.prototype.appendAfter = செயல்பாடு (உறுப்பு) ( element.parentNode.insertBefore(this, element.nextSibling); ),false;

அதைச் செயலில் பார்க்க, பின்வரும் குறியீடு துணுக்கை இயக்கவும்

/* NeighbourElement */ Element.prototype.appendBefore = செயல்பாடு(உறுப்பு) ( element.parentNode.insertBefore(இது, உறுப்பு); ), தவறான; /* NeighbourElementக்குப் பிறகு உறுப்பைச் சேர்க்கிறது */ Element.prototype.appendAfter = செயல்பாடு(உறுப்பு) ( element.parentNode.insertBefore(this, element.nextSibling); ), தவறு; /* வழக்கமான உருவாக்கம் மற்றும் அமைவு ஒரு புதிய அனாதை உறுப்பு பொருள் */ var NewElement = document.createElement("div"); NewElement.innerHTML = "புதிய உறுப்பு"; NewElement.id = "NewElement"; /* மேற்கூறிய முன்மாதிரிகளைப் பயன்படுத்துவதற்கு முன் -அல்லது- புதிய உறுப்புகளைச் சேர்க்கவும் */ NewElement.appendAfter(document.getElementById("Neighbour2")); div ( text-align: centre; ) #Neighbourhood (color: brown; ) #NewElement (color: green; ) Neighbour 1 Neighbour 2 Neighbour 3

MDN போலவே இன்செர்ட்ஆஃப்டர் வேலை செய்ய வேண்டும். கீழே உள்ள குறியீடு பின்வருவனவற்றைச் செய்யும்:

• குழந்தைகள் இல்லை என்றால், ஒரு புதிய முனை சேர்க்கப்படும்
• குறிப்பு முனை இல்லை என்றால், ஒரு புதிய முனை சேர்க்கப்படும்
• குறிப்பு முனைக்குப் பிறகு ஒரு முனை இருந்தால், ஒரு புதிய முனை சேர்க்கப்படும்
• குறிப்பிடப்பட்ட முனையில் குழந்தைகள் இருந்தால், அந்த உடன்பிறப்புக்கு முன் புதிய முனை செருகப்படும்
• புதிய முனையை வழங்குகிறது

முனை நீட்டிப்பு

Node.prototype.insertAfter = செயல்பாடு(முனை, குறிப்புநோடு) ((நோட்) என்றால் இது.insertBefore(node, referenceNode && referenceNode.nextSibling); திரும்ப முனை; );

ஒரு பொதுவான உதாரணம்

Node.parentNode.insertAfter(newNode, node);

குறியீடு இயங்குவதைப் பார்க்கவும்

// முதலில் நீட்டிக்க Node.prototype.insertAfter = செயல்பாடு(நோட், குறிப்புநோடு) ((நோட்) என்றால் இது.insertBefore(node, referenceNode && referenceNode.nextSibling); திரும்ப முனை; ); var referenceNode, newNode; newNode = document.createElement("li") newNode.innerText = "முதல் புதிய உருப்படி"; newNode.style.color = "#FF0000"; document.getElementById("குழந்தைகள் இல்லை").insertAfter(newNode); newNode = document.createElement("li"); newNode.innerText = "இரண்டாவது புதிய உருப்படி"; newNode.style.color = "#FF0000"; document.getElementById("no-reference-node").insertAfter(newNode); referenceNode = document.getElementById("no-sibling-after"); newNode = document.createElement("li"); newNode.innerText = "மூன்றாவது புதிய உருப்படி"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); referenceNode = document.getElementById("sibling-after"); newNode = document.createElement("li"); newNode.innerText = "நான்காவது புதிய உருப்படி"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); குழந்தைகள் இல்லை குறிப்பு முனை இல்லை

• முதல் உருப்படி

பிறகு உடன்பிறப்புகள் இல்லை

• முதல் உருப்படி

பிறகு உடன்பிறப்பு

• முதல் உருப்படி
• மூன்றாவது உருப்படி

parentNode.insertBefore() போன்று insertBefore() முறை பயன்படுத்தப்படுகிறது. எனவே இதைப் பின்பற்றி parentNode.insertAfter() முறையை உருவாக்க பின்வரும் குறியீட்டை எழுதலாம்.

Node.prototype.insertAfter = செயல்பாடு(newNode, referenceNode) (referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); // karim79"s தீர்வை அடிப்படையாகக் கொண்டது); // தேவையான கையாளுதல்களைப் பெறுதல் var refElem = ஆவணம்.IdElement pTwo"); var parent = refElem.parentNode; // உருவாக்குதல்

பத்தி மூன்று

var txt = document.createTextNode("பத்தி மூன்று"); var பத்தி = document.createElement("p"); paragraph.appendChild(txt); // இப்போது நாம் அதை insertBefore() parent.insertAfter (பத்தி, refElem) என அழைக்கலாம்;

பத்தி ஒன்று

பத்தி இரண்டு

இந்தக் கட்டுரையில் கூறப்பட்டுள்ளபடி, DOM விரிவாக்கம் உங்களுக்கு சரியான தீர்வாக இருக்காது என்பதை நினைவில் கொள்ளவும்.

இருப்பினும், இந்த கட்டுரை 2010 இல் எழுதப்பட்டது, இப்போது விஷயங்கள் வேறுபட்டிருக்கலாம். எனவே நீங்களே முடிவு செய்யுங்கள்.

எல்லா காட்சிகளையும் கையாள உங்களை அனுமதிக்கிறது

செயல்பாடு insertAfter(newNode, referenceNode) ( if(referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == "#text") referenceNode = referenceNode.nextSibling; if(!referenceNode.nextSibling; if(!referenceNodeCh) document.body.appendNode);d(fenew.appendNode) (!referenceNode.nextSibling) document.body.appendChild(newNode); else referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

ஒரு சிறிய css கோப்பை இன்லைன் செய்ய, கடைசியாக இருக்கும் குழந்தை இன்லைன் செய்த உடனேயே, இணைப்பு உறுப்பைச் செருக இந்தக் குறியீடு செயல்படுகிறது.

Var raf, cb=function())( // newnode var link=document.createElement("link"); link.rel="stylesheet";link.type="text/css";link.href="css / style.css"; //கடைசி முனைக்கு பிறகு செருகவும் அடுத்த உடன்பிறப்பு ); //செருகுவதற்கு முன் சரிபார்க்கவும் முயற்சி (raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) catch(err)( raf=false; ) என்றால் (raf)raf(cb); வேறு window.addEventListener("load",cb);

இந்தக் கேள்விக்கு ஏற்கனவே பல பதில்கள் இருப்பதாக எனக்குத் தெரியும், ஆனால் அவை எதுவும் எனது சரியான தேவைகளைப் பூர்த்தி செய்யவில்லை.

parentNode.insertBefore இன் நேர் எதிர் நடத்தை கொண்ட ஒரு செயல்பாடு எனக்குத் தேவை - அதாவது, அது ஒரு பூஜ்ய referenceNode ஐ ஏற்க வேண்டும் (இது பதிலுக்கு ஏற்கப்படவில்லை) மற்றும் அங்கு insertBefore செருகப்படும் முடிவுஅதற்கு முன் அவர் செருக வேண்டும் ஆரம்பம், இல்லையெனில் இந்தச் செயல்பாட்டைக் கொண்டு அசல் இருப்பிடத்தில் ஒட்டுவதற்கு வழி இருக்காது; அதே காரணத்திற்காக இறுதியில் செருகும் முன் insert.

null referenceNode க்கு நீங்கள் பெற்றோருக்கு முன் செருக வேண்டும் என்பதால், நாங்கள் பெற்றோரை அறிந்து கொள்ள வேண்டும் - insertBefore என்பது parentNode இன் ஒரு முறையாகும், எனவே அது பெற்றோரின் parentNodeக்கான அணுகலைக் கொண்டுள்ளது; எங்கள் செயல்பாடு இல்லை, எனவே நாம் பெற்றோர் உறுப்பை ஒரு அளவுருவாக அனுப்ப வேண்டும்.

இதன் விளைவாக செயல்பாடு இதுபோல் தெரிகிறது:

செயல்பாடு செருகிய பின்(parentNode, newNode, referenceNode) (parentNode.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: parentNode.firstChild); )

என்றால் (! Node.prototype.insertAfter) ( Node.prototype.insertAfter = செயல்பாடு(newNode, referenceNode) ( this.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: this.firstChild); ); )

node1.after(node2) உருவாக்குகிறது ,

இதில் node1 மற்றும் node2 ஆகியவை DOM முனைகளாகும்.

இந்த இடுகையில் ஜாவாஸ்கிரிப்டில் ஒரு பொருளில் இருந்து ஒரு உறுப்பை எவ்வாறு சேர்ப்பது அல்லது அகற்றுவது என்பதை நான் உங்களுக்கு சொல்ல விரும்புகிறேன். இது மிகவும் எளிமையானது, ஆனால் பல ஆரம்பநிலையாளர்கள், முன்பு என்னைப் போலவே, அதைப் பற்றி அடிக்கடி குழப்பமடைகிறார்கள்.

உதாரணமாக ஒரு பொருளை உருவாக்குவோம் var obj = (பெயர்: "அலெக்ஸ்", கடைசி_பெயர்: "பெட்ரோவ்", இணையதளம்: "தளம்", );

பெயர், கடைசி_பெயர் மற்றும் இணையதளம் போன்ற தரவைக் கொண்ட எளிய பொருள் எங்களிடம் உள்ளது. தரவு முற்றிலும் எதுவும் இருக்கலாம், ஆனால் இந்த இடுகையின் நோக்கங்களுக்காக அது சரியாக இருக்கும்.

ஒரு புதிய உறுப்பு சேர்க்கிறது obj.country = "ru"; // சேர்க்கும் புதிய விசை"ru" obj["city"] = "Moscow" மதிப்பைக் கொண்ட ஒரு பொருளாக "country"; // ஒரு புதிய விசையையும் சேர்க்கும், "மாஸ்கோ" மதிப்புடன் "நகரம்" மட்டுமே

மேலே உள்ள குறியீடு தெளிவாக உள்ளது, ஆனால் தெளிவுபடுத்துவதற்காக: "" ஐப் பயன்படுத்தி பொருளின் தொடரியல் பொருளுக்கு புதிய மதிப்புகளைச் சேர்க்கலாம். மற்றும் விசை அல்லது வழக்கமான வரிசை வடிவம். நீங்கள் அதை ஒரு வரிசையாக அறிவித்தால், obj இன்னும் ஒரு பொருளாகவே உள்ளது, ஏனெனில் நீங்கள் முன்பு அதை () க்கு நன்றி தெரிவித்தீர்கள்.

ஒரு பொருளின் உள்ளே ஒரு பொருளை உருவாக்கவும் obj.other_obj = (); // obj இல் other_obj என்ற புதிய மதிப்பை உருவாக்கி அதை ஒரு பொருளாக மாற்றவும்

இப்போது சில தரவைச் சேர்ப்போம்:

Obj.other_obj.first = "புதிய பொருளின் முதல் விசை"; obj.other_obj.second = "இரண்டாவது";

மற்ற_obj இன் உள்ளே முதல் மற்றும் இரண்டாவது இரண்டு புதிய மதிப்புகளை உருவாக்கியுள்ளோம்.

ஒரு உறுப்பை நீக்குதல் obj.name ஐ நீக்குதல்; // திரும்புகிறது: உண்மை

நீங்கள் நீக்கத்தைப் பயன்படுத்தலாம், இது பொருட்களிலிருந்து கூறுகளை அகற்றலாம். நீங்கள் முழு பொருளையும் இந்த வழியில் நீக்க முடியாது, ஆனால் உங்களுக்கு தேவைப்பட்டால், நீங்கள் இதைச் செய்யலாம்:

பொருள் = (); // பொருளை மீண்டும் காலியாக்குகிறது

அவ்வளவுதான், ஜாவாஸ்கிரிப்டில் உள்ள பொருட்களைப் பற்றி உங்களுக்கு இன்னும் ஏதேனும் கேள்விகள் இருந்தால், கீழே ஒரு கருத்தை எழுதுங்கள், நான் உங்களுக்கு உதவ முயற்சிப்பேன்.

இது jQuery முறைகளின் சொந்த சமமான இடுகைகளின் நான்காவது பகுதி. தொடர்வதற்கு முன் நீங்கள் இதைப் படிக்க விரும்பலாம்.

இந்த கட்டுரையில் கூறுகளை உருவாக்க, செருக, நகர்த்த மற்றும் நீக்குவதற்கான வழிகளைப் பார்ப்போம். jQuery ஏற்கனவே ஏராளமான பயனுள்ள முறைகளைக் கொண்டிருந்தாலும், இவை அனைத்தையும் சொந்த முறைகளைப் பயன்படுத்தி எளிதாகச் செய்ய முடியும் என்பதை அறிந்து நீங்கள் ஆச்சரியப்படுவீர்கள்.

jQuery உறுப்புகளின் HTML குறியீட்டைக் கையாளுதல் // get var html = $(elem).html(); // அமைக்க $(elem).html("புதிய html"); நேட்டிவ் JS // get var html = elem.innerHTML; // set elem.innerHTML = "புதிய html"; jQuery உறுப்பு உரை கையாளுதல் // get var text = $(elem).text(); // அமைக்க $(elem).text("புதிய உரை"); நேட்டிவ் JS // get var text = elem.textContent; // set elem.textContent = "புதிய உரை"; jQuery உறுப்பை உருவாக்குதல் $(""); நேட்டிவ் JS document.createElement("div"); jQuery உறுப்புகளின் முடிவில் உள்ளடக்கத்தைச் சேர்க்கிறது $(parentNode).append(newNode); நேட்டிவ் JS parentNode.appendChild(newNode); jQuery உறுப்புகளின் தொடக்கத்தில் உள்ளடக்கத்தைச் சேர்க்கிறது $(referenceNode).prepend(newNode); நேட்டிவ் JS referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // அல்லது referenceNode.insertAdjacentElement("பிறகு", newNode); // FF 48.0+, IE8+ ஒரு உறுப்பு jQuery $(referenceNode) முன் நேரடியாகச் செருகவும். முன்(newNode); நேட்டிவ் JS referenceNode.parentNode.insertBefore(newNode, referenceNode); // அல்லது referenceNode.insertAdjacentElement("தொடக்கத்திற்கு முன்", newNode); // FF 48.0+, IE8+ ஒரு உறுப்பு jQuery $(referenceNode) க்குப் பிறகு நேரடியாகச் செருகவும். பிறகு (newNode); நேட்டிவ் JS referenceNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // அல்லது referenceNode.insertAdjacentElement("பிறகு", புதியநோட்); // FF 48.0+, IE8+

குறிப்பு: referenceNode DOM ட்ரீயில் இருந்தால் மற்றும் ஒரு மூல உறுப்பு இருந்தால் மட்டுமே 'முன் ஆரம்பம்' மற்றும் 'பிறகு' வேலை செய்யும்.

பின்வருவனவற்றைப் பாருங்கள்:

ReferenceNode.insertAdjacentElement(நிலை, முனை);

insertAdjacentElement முறை இரண்டு அளவுருக்களை எடுக்கும்:

• நிலை - referenceNode உடன் தொடர்புடைய நிலை, பின்வருவனவற்றில் ஒன்றாக இருக்க வேண்டும்:
  • 'beforebegin' - உறுப்பு தன்னை முன்.
  • 'பிறகு' - உறுப்பு உள்ளே, முதல் குழந்தைக்கு முன்.
  • 'முன்' - உறுப்பு உள்ளே, கடைசி குழந்தைக்கு பிறகு.
  • ‘பிறகு’ - உறுப்பு தானே பிறகு.
• முனை - செருகுவதற்கான முனை

உரை உள்ளடக்கம்

சில உரை சில உரை var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("முன்", elem2); // முடிவு சில உரை சில உரை

insertAdjacentElement முறையானது insertBefore முறையை விட தூய்மையானது மற்றும் மிகவும் உள்ளுணர்வு கொண்டது, ஆனால் பிந்தையது பழைய உலாவிகளில் சிறப்பாக ஆதரிக்கப்படுகிறது.

பல முறை கூறுகளைச் சேர்த்தல்

DOM மரத்தில் அமைந்துள்ள ஒரு முனையில் ஒரு உறுப்பைச் சேர்ப்பது மீண்டும் வரைவதற்கு வழிவகுக்கும் என்பதும் குறிப்பிடத்தக்கது. இது மிகவும் நல்லதல்ல, ஏனெனில் உலாவி புதிய உறுப்பின் அளவு மற்றும் நிலையை மீண்டும் கணக்கிட வேண்டும், இது உறுப்பின் வழித்தோன்றல்கள், மூதாதையர்கள் மற்றும் DOM இல் அதன் பின் தோன்றும் உறுப்புகளிலும் மாற்றங்களுக்கு வழிவகுக்கும். நீங்கள் DOM இல் நிறைய கூறுகளைச் சேர்த்தால், இதற்கு சிறிது நேரம் ஆகலாம்.

இதை தவிர்க்க, DocumentFragment உடன் சேர்க்கலாம். ஒரு ஆவணத் துண்டு என்பது ஒரு ஆவணப் பொருளாகும், அது நினைவகத்தில் மட்டுமே உள்ளது, எனவே அதைச் சேர்ப்பது எந்த மாற்றத்தையும் ஏற்படுத்தாது.

DOM மரத்தில் இருக்கும் உல் உறுப்புக்கு 100 லி தனிமங்களைச் சேர்க்க வேண்டும் என்று வைத்துக்கொள்வோம்:

// எங்கள் உருப்படிகளைக் கொண்டிருக்கும் உறுப்பைப் பெறுங்கள் var ul = document.querySelector("ul"); // (var i = 1; i. க்கு 100 பட்டியல் கூறுகளை உருவாக்கவும்< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

மேலே உள்ள எடுத்துக்காட்டில், லி உறுப்புகள் நேரடியாக DOM மரத்தில் அமைந்துள்ள உல் உறுப்புடன் சேர்க்கப்படுகின்றன, எனவே ஒவ்வொரு மறு செய்கையிலும் மீண்டும் வரையப்படும் - அதாவது 100 மாற்றங்கள்!

ஒரு சிறந்த வழியைக் கண்டுபிடிப்போம்.

// எங்கள் உருப்படிகளைக் கொண்டிருக்கும் உறுப்பைப் பெறுங்கள் var ul = document.querySelector("ul"); // var docFrag = document.createDocumentFragment() இல் பட்டியல் கூறுகளைச் சேர்க்க ஒரு ஆவணப் பகுதியை உருவாக்கவும்; // (var i = 1; i. க்கு 100 பட்டியல் கூறுகளை உருவாக்கவும்< 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);

அதே எடுத்துக்காட்டில், நினைவகத்தில் உள்ள ஆவணத் துண்டில் li உறுப்புகள் சேர்க்கப்படுகின்றன, இதனால் ul உறுப்புடன் துண்டு சேர்க்கப்படும்போது மறுபிரவேசம் தூண்டப்படும். இந்த முறை மீண்டும் வரைதல்களின் எண்ணிக்கையை 100ல் இருந்து 1 ஆக குறைக்கும்.

jQuery உறுப்பை நீக்குதல் $(referenceNode).remove(); நேட்டிவ் JS referenceNode.parentNode.removeChild(referenceNode); // அல்லது referenceNode.remove(); // FF 23.0+, 23.0+, Edge (IE ஆதரவு இல்லை)