जावास्क्रिप्ट: DOM टुकड़े बनाना

अगर आपको कभी जावास्क्रिप्ट लिखना था और जावास्क्रिप्ट में कुछ इस तरह लिखना था:
var p = document.createElement ("p");
p.appendChild (document.createTextNode ("वास्तविक मछली मछली"));
var div = document.createElement ("div");
div.setAttribute ('आईडी', 'नया');
div.appendChild (p);

यह आपके लिए उपयोगी हो सकता है।

समस्या: जब आप एक से अधिक तत्वों को एक दूसरे के भीतर बनाते हैं, तो कोड बहुत जटिल हो जाता है।

मैं समस्या को हल करने के लिए एक सरल उपकरण प्रदान करता हूं - बनाएं () फ़ंक्शन (नीचे स्रोत)। उदाहरण के लिए, पाठ का एक पैराग्राफ बनाएं:
var el = create ("p", {}, "Farewell, Love!");

या एक पैराग्राफ और उसके अंदर एक लिंक के साथ एक div:
var div = create ("div", {id: "new", style: "background: #fff"},
बनाएँ ("पी", {संरेखित करें: 'केंद्र'},)
"प्रवेश:"
create ('a', {href: " ua.fishki.net/picso/kotdavinchi.jj "),
"चित्र"),
": अंत")
);

या, यहाँ एक तालिका है:
var धारक = document.getElementById ("धारक 2");
var तालिका;
var td;
धारक.एपेंडचाइल्ड (
तालिका =
बनाएँ ("तालिका", {आईडी: 'बदसूरत', कर्नल: 3},
बनाएँ ("tbody", {},
बनाएँ ("tr", {},
बनाएँ ("td", {चौड़ाई: '10% '),
«नमस्ते»),
td =
बनाएँ ("td", {style: 'background: #fcc'},
«वहाँ»),
बनाएँ ("td", {Class: 'special2'}, "हर जगह")
)
)
)
);

कृपया ध्यान दें:

1. IE को एक तत्व तत्व की आवश्यकता होती है, अन्यथा यह तालिका दिखाने से इनकार करता है।
2. वर्ग विशेषता कुछ के साथ संघर्ष करती है, इसलिए आपको इसे कक्षा के रूप में लिखना होगा। ऐसा लगता है कि यह परिणाम को प्रभावित नहीं करता है।
3. तालिका = और tr = उदाहरण में आप उनके साथ आगे काम करने के लिए बनाई गई नेस्टेड वस्तुओं को बचाने के लिए अनुमति देते हैं।
4. यह कोड IE, मोज़िला और ओपेरा में काम करता है।

खुद को फंक्शन

समारोह बनाएँ (नाम, गुण) {
var el = document.createElement (नाम);
अगर (टाइपो गुण == 'ऑब्जेक्ट') {
के लिए (संस्करण मैं विशेषताओं में) {
el.setAttribute (i, विशेषताएँ [i]);

अगर (i.toLowerCase () == 'वर्ग') {
el.className = विशेषताएँ [i]; // IE संगतता के लिए

} और यदि (i.toLowerCase () == 'शैली') {
el.style.cssText = विशेषताएँ [i]; // IE संगतता के लिए
}
}
}
के लिए (var i = 2; मैं <आर्ग्युमेंट। लर्निंग; i ++) {
var val = तर्क [i];
if (टाइपोफ वैल == 'स्ट्रिंग') {val = document.createTextNode (val)};
el.appendChild (वैल);
}
el el;
}

इवान कुर्मानोव के विचार के लिए धन्यवाद,
काम के उदाहरणों के साथ मूल लेख: ahinea.com/2006/04/14/javascript-dom-create