जावास्क्रिप्ट का उपयोग करके सभी HTML तत्व बच्चों को दूसरे माता-पिता के पास कैसे ले जाएं?

Question

कल्पना कीजिए:

<div id="old-parent">
    <span>Foo</span>
    <b>Bar</b>
    Hello World
</div>
<div id="new-parent"></div>

क्या जावास्क्रिप्ट से सभी बच्चे नोड्स (दोनों तत्वों, और पाठ नोड्स) ले जाने के लिए लिखा जा सकता है old-parentके लिए new-parentjQuery के बिना?

मैं नोड्स के बीच व्हाट्सएप के बारे में परवाह नहीं करता हूं, हालांकि मैं आवारा को पकड़ने की उम्मीद करता हूं Hello World, उन्हें भी-के रूप में माइग्रेट करना होगा।

संपादित करें

स्पष्ट होने के लिए, मैं समाप्त करना चाहता हूं:

<div id="old-parent"></div>
<div id="new-parent">
    <span>Foo</span>
    <b>Bar</b>
    Hello World
</div>

प्रश्न का उत्तर जिसमें से यह एक प्रस्तावित डुप्लिकेट है:

<div id="new-parent">
    <div id="old-parent">
        <span>Foo</span>
        <b>Bar</b>
        Hello World
    </div>
</div>

Comments

"कट एंड पेस्ट" के

— मार्क बी

@MarcB, यह कोई डुप्लिकेट नहीं है। जिस प्रश्न को आप लिंक करते हैं, वह सभी बच्चों को स्थानांतरित करने से नहीं निपटता है , और न ही उस प्रश्न का कोई उत्तर विभिन्न प्रकार के HTML नोड (जैसे टेक्स्ट नोड्स) को स्थानांतरित करने की मेरी आवश्यकता को संबोधित करता है

— ड्रू नोक

जवाब वही है जो आपको चाहिए। डोम एक पेड़ है। एक नोड को स्थानांतरित करें, उस नोड के सभी बच्चे इसके साथ चलते हैं।

— मार्क बी

@MarcB कभी-कभी आप गंतव्य में मूल वस्तु नहीं चाहते हैं। उदाहरण के लिए एक TODO सूची के सभी तत्वों को 'लंबित' से 'पूर्ण' मूल तत्वों तक ले जाने पर विचार करें।

— ड्रू नोक

Answer 1

डेमो

मूल रूप से, आप पुराने-मूल नोड के प्रत्येक प्रत्यक्ष वंशज के माध्यम से लूप करना चाहते हैं, और इसे नए माता-पिता के पास ले जाएं। प्रत्यक्ष वंशज का कोई भी बच्चा इसके साथ स्थानांतरित हो जाएगा।

var newParent = document.getElementById('new-parent');
var oldParent = document.getElementById('old-parent');

while (oldParent.childNodes.length > 0) {
    newParent.appendChild(oldParent.childNodes[0]);
}

Comments

वास्तव में कुशल होने के लिए: while (oldParent.childNodes.length) { newParent.appendChild(oldParent.firstChild); }

— गिबोल्ट

ध्यान दें, कि चाइल्डनॉड्स [] में आमतौर पर खाली पाठ नोड्स होते हैं, (स्रोत कोड में प्रत्येक पंक्ति विराम के लिए एक)।

— Dercsár

@ जिबोल्ट मैंने एक JSPerf परीक्षण बनाया और यह मेरे लिए इंगित करता है कि कॉल करने की तुलना में सरणी का उपयोग तेजी से होता है firstChild। अंतर सबसे बेहतर है। यह संभवत: ब्राउज़र से ब्राउज़र में भी भिन्न होगा। मुझे लगता firstChildहै कि अधिक पठनीय है, हालांकि।

— क्रश करें

while (oldParent.hasChildNodes()) newParent.appendChild(oldParent.firstChild);और while (oldParent.firstChild) newParent.appendChild(oldParent.firstChild);क्रोमियम में 2x और फ़ायरफ़ॉक्स में 6x से 10x तेज़ी से काम करते हैं। आपका संशोधित JSPerf

— उपयोगकर्ता

यह DocumentFragment developer.mozilla.org/en-US/docs/Web/API/DocumentFragment का उपयोग करने और एक बार प्रदर्शन के बाद सभी तत्वों को स्थानांतरित करने के लिए फायदेमंद हो सकता है ।

— 41होर मे

Answer 2

आधुनिक तरीका:

newParent.append(...oldParent.childNodes);

1. .appendके लिए प्रतिस्थापन है .appendChild। मुख्य अंतर यह है कि यह एक साथ कई नोड्स को स्वीकार करता है और यहां तक ​​कि सादे तार भी, जैसे.append('hello!')
2. oldParent.childNodesहै iterable इसलिए इसे ...कई मापदंडों के साथ फैलाया जा सकता है.append()

दोनों की संगतता टेबल (संक्षेप में: एज 17+, सफारी 10+):

• https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append#Browser_compatibility
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Browser_compatibility

Comments

बहुत सुंदर लग रहा है। मुझे आश्चर्य है कि अगर यहां अन्य उत्तरों के लिए एक प्रदर्शन अंतर है।

— आकर्षित नोक

अगर वहाँ है तो कम से कम होना चाहिए। अगर कुछ भी तेज है क्योंकि यह append कई के बजाय एक ही कॉल है।

— मुक्तक

सावधान रहें: IE11 के लिए नहीं (कभी नहीं, शायद)

— रेने वैन डेर लेंडे

अच्छा लगा, लेकिन मैंने कुछ सरल परीक्षण किए और while() अभी भी क्रोम में थोड़ा तेज है। इसके लिए मेरा शब्द न लें और यदि संभव हो तो अपने स्वयं के परीक्षण करें।

— लेप

Answer 3

यहाँ एक सरल कार्य है:

function setParent(el, newParent)
{
    newParent.appendChild(el);
}

elकी childNodes हैं तत्वों को स्थानांतरित किया जाना है, newParent है तत्व el, में ले जाया जाएगा ताकि आप की तरह समारोह निष्पादित होगा:

var l = document.getElementById('old-parent').childNodes.length;
var a = document.getElementById('old-parent');
var b = document.getElementById('new-parent');
for (var i = l; i >= 0; i--)
{
    setParent(a.childNodes[0], b);
}

यहाँ डेमो है

Comments

आप अपने कोड के साथ इसका उपयोग कैसे करेंगे? यह old-parentतत्व को स्थानांतरित करेगा यदि आप उस के रूप में पास हुए el।

— क्रश

यह HTML को रेंडर करेगा:<div id="new-parent"><div id="old-parent">...</div></div>

— क्रश करें

यह काम नहीं करेगा क्योंकि जैसे ही आप बच्चे को स्थानांतरित करते हैं, लंबाई बदलती है। तो, आप केवल नोड्स के आधे भाग को समाप्त करेंगे। आपको पीछे की ओर चलना होगा, या थोड़ी देर के लूप का उपयोग करना होगा जैसे मैंने किया।

— क्रश करें

फिर भी काम नहीं करेगा। आपको करने की आवश्यकता है: for (var i = l; i >= 0; i--)या while (document.getElementById('old-parent').length > 0)। साथ ही, आपके डेमो में त्रुटियां हैं।

— क्रश करें

@ क्रश को एडिट, sry -while (document.getElementById('old-parent').length > 0) { setParent(document.getElementById('old-parent')[i], document.getElementById('new-parent')); }

— Cilan

Answer 4

यह उत्तर वास्तव में केवल तभी काम करता है जब आपको एक से दूसरे में इनर कोड (इनरएचटीएमएल) को स्थानांतरित करने के अलावा कुछ करने की आवश्यकता नहीं है:

// Define old parent
var oldParent = document.getElementById('old-parent');

// Define new parent
var newParent = document.getElementById('new-parent');

// Basically takes the inner code of the old, and places it into the new one
newParent.innerHTML = oldParent.innerHTML;

// Delete / Clear the innerHTML / code of the old Parent
oldParent.innerHTML = '';

उम्मीद है की यह मदद करेगा!

Comments

यह काम करता है, हालांकि मैं वास्तव में HTML स्ट्रिंग्स के माध्यम से क्रमबद्ध / deserialise नहीं करना चाहता हूं। हालांकि यह काम करता है :)

— आकर्षित नोक

यह तत्वों से जुड़ी किसी भी वस्तु और घटनाओं की नकल नहीं करेगा

— ग्रेगरी मैगर्क

यह पुनर्जीवित डोम, यह मौजूदा नोड्स / घटनाओं को स्थानांतरित नहीं करता है और यह संभवतः सभी बच्चों पर एक लूप की तुलना में अधिक धीमा है

— जॉर्डन

मैंने कुछ सरल परीक्षण किए और यह विधि अभी भी स्वीकृत उत्तर की तुलना में धीमी है, और इसमें पहले से ही समझाया गया नुकसान है।

— लेप

Answer 5

यदि आप -आईडी के नाम का उपयोग नहीं करते हैं तो आप ऐसा कर सकते हैं

oldParent.id='xxx';
newParent.id='oldParent';
xxx.id='newParent';
oldParent.parentNode.insertBefore(oldParent,newParent);

#newParent { color: red }

<div id="oldParent">
    <span>Foo</span>
    <b>Bar</b>
    Hello World
</div>
<div id="newParent"></div>