कैसे आप जावास्क्रिप्ट

Question

तोड़ने मैं अपने वेब पृष्ठ, एक काम और एक संदर्भ खंड के विभिन्न वर्गों के लिए दो divs है बिना jQuery के साथ एक से दूसरे div से एचटीएमएल के लिए कदम है। एक निश्चित आकार है, दूसरा परिवर्तनीय आकार है और वे लंबवत ढेर हैं। मैं इसे डिजाइन करने की कोशिश कर रहा हूं ताकि यदि आप संदर्भ फलक में कुछ पर काम करना चाहते हैं, तो आप एक लिंक पर क्लिक करते हैं और यह दो पैन के बीच सभी डेटा को स्वैप करता है। मेरा विचार निम्न करने के लिए किया गया था:

var working = $("#working_pane").html(); 
var ref = $("#reference_pane").html(); 

$("#working_pane").html(ref); 
$("#reference_pane").html(working); 

समस्या इस के साथ, ऐसा लगता है कि किसी भी जावास्क्रिप्ट इन शीशे के अंदर संदर्भित (उदाहरण के लिए, जगह संपादकों में) स्विचिंग पर टूट हो जाता है। कोई जावास्क्रिप्ट त्रुटियां नहीं होती हैं, यह बस कुछ भी नहीं होता है, जैसे जावास्क्रिप्ट संबंध टूट जाते हैं।

वहाँ किसी भी जावास्क्रिप्ट निहित तोड़ने के बिना एचटीएमएल स्थानांतरित करने के लिए है?

Answer 1

जब आप किसी HTML दस्तावेज़ के बिट्स के साथ काम कर रहे हों, तो आपको नोड ऑब्जेक्ट्स के साथ काम करना चाहिए, सामग्री को ब्राउज़र के रूप में देखता है, HTML स्ट्रिंग नहीं।

HTML ब्राउज़र नोड्स को देखो और उन्हें एक स्ट्रिंग के लिए serialise करना पड़ता है पाने के लिए। फिर जब आप उस HTML को दस्तावेज़ के किसी अन्य हिस्से में निर्दिष्ट करते हैं (innerHTML या jQuery html(...) के साथ), तो आप ब्राउज़र को पहले से मौजूद सभी सामग्री को नष्ट करने के लिए कह रहे हैं, श्रमिक रूप से HTML स्ट्रिंग को नोड ऑब्जेक्ट्स के नए सेट में पार्स कर दें , और तत्व में इन नए नोड्स डालें।

यह, धीमी गति से बेकार है, और मूल नोड वस्तुओं, जैसे कि धारावाहिक एचटीएमएल में व्यक्त नहीं किया जा सकता के किसी भी पहलू को खो देता है: (

• ईवेंट हैंडलर कार्य/श्रोताओं है और इसीलिए आपके संपादकों हैं तोड़ने)
• वैरिएबल संदर्भ अन्य JavaScript कोड नोड्स (भी स्क्रिप्ट टूट जाता है) के लिए है
• प्रपत्र फ़ील्ड मान (सिवाय, आंशिक रूप से, IE में बग के कारण)
• कस्टम गुण

तो - और यह लागू होता है आप jQuery या सादा डोम उपयोग कर रहे हैं - चारों ओर एचटीएमएल फेंक नहीं है! मूल नोड ऑब्जेक्ट्स लें और उन्हें उस स्थान पर डालें जहां आप उन्हें चाहते हैं (वे उस स्थान को छोड़ देंगे जो मूल रूप से वे स्वचालित रूप से थे)। संदर्भ बरकरार रहते हैं इसलिए स्क्रिप्ट काम जारी रखेंगे।

// contents() gives you a list of element and text node children 
var working = $("#working_pane").contents(); 
var ref = $("#reference_pane").contents(); 

// append can be given a list of nodes to append instead of HTML text 
$("#working_pane").append(ref); 
$("#reference_pane").append(working); 

Answer 2

यह डुप्लिकेट आईडी के परिणामस्वरूप हो सकता है। मूल रूप से आपके पास एक div में तत्व हो सकता है जिसमें id = id1 है, अब यह एक var में संग्रहीत हो जाता है और एक नए div में इंजेक्शन दिया जाता है। अब वर्तमान में ऐसा लगता है कि आपके पास यह सुनिश्चित करने के लिए कोई तंत्र नहीं है कि आपके पास एक ही समय में डुप्लिकेट आईडी नहीं हैं। इस तोड़ सकते हैं js

तो इस पर विचार और यदि आप सुनिश्चित कर लें कि तत्वों पहले एक वर तो मूल निकाल दिए जाते हैं में जमा हो जाती है और फिर एक नए स्थान में संलग्न हो।