जावास्क्रिप्ट - कुशलतापूर्वक एकाधिक HTML तत्वों को सम्मिलित करें

Question

मैं उपयोगकर्ता के फेसबुक मित्र (JSON ऑब्जेक्ट के रूप में प्राप्त) की एक सूची के साथ select तत्व बनाना चाहता हूं। मैं अपने HTML में <select id="friends"></select> हार्डकोड, तो JSON पार्स करने के लिए निम्नलिखित जावास्क्रिप्ट कोड का उपयोग करें और select तत्व के एक option के रूप में प्रत्येक दोस्त सम्मिलित करें:

var msgContainer = document.createDocumentFragment(); 
for (var i = 0; i < response.data.length; i++) { 
    msgContainer.appendChild(document.createTextNode('<option value="'+response.data[i].id+'">'+response.data[i].name+'</option>'));  
} 
document.getElementById("friends").appendChild(msgContainer); 

यह लगभग काम करता है, सिवाय इसके कि इसे सम्मिलित करता है कि < और > बजाय < और >। मैं इसे कैसे ठीक कर सकता हूं, और शुद्ध जावास्क्रिप्ट (JQuery नहीं) का उपयोग कर एकाधिक HTML तत्वों को सम्मिलित करने का एक और अधिक प्रभावी तरीका है?

Answer 1

सुनिश्चित नहीं है कि आप टेक्स्ट नोड क्यों बना रहे हैं, लेकिन ऐसा लगता है कि आप option तत्व बनाना चाहते हैं, ताकि आप इसके बजाय Option कन्स्ट्रक्टर का उपयोग कर सकें।

var msgContainer = document.createDocumentFragment(); 

for (var i = 0; i < response.data.length; i++) { 
    msgContainer.appendChild(new Option(response.data[i].name, response.data[i].id)); 
} 
document.getElementById("friends").appendChild(msgContainer); 

---

या आप सामान्य document.createElement() उपयोग कर सकते हैं।

var msgContainer = document.createDocumentFragment(); 

for (var i = 0; i < response.data.length; i++) { 
    var option = msgContainer.appendChild(document.createElement("option")); 
    option.text = response.data[i].name; 
    option.value = response.data[i].id; 
} 
document.getElementById("friends").appendChild(msgContainer); 

---

यह तत्व पैदा करने और एक ही समय में गुण स्थापित करने के लिए एक सहायक समारोह के लिए अच्छा है।

यहाँ एक का एक सरल उदाहरण है:

function create(name, props) { 
    var el = document.createElement(name); 
    for (var p in props) 
     el[p] = props[p]; 
    return el; 
} 

यह कुछ विशिष्ट जरूरतों को कवर करने विस्तारित किया जा सकता है, लेकिन यह ज्यादातर मामलों के लिए काम करेंगे।

आप इस तरह यह प्रयोग करना होगा:

var msgContainer = document.createDocumentFragment(); 

for (var i = 0; i < response.data.length; i++) { 
    msgContainer.appendChild(create("option", { 
     text: response.data[i].name, 
     value: response.data[i].id 
    })); 
} 
document.getElementById("friends").appendChild(msgContainer); 

Answer 2

बजाय पाश के लिए अपने में इस प्रयास करें:

var o = document.createEleent('option'); 
o.setAttribute('value', response.data[i].id); 
o.appendChild(document.createTextNode(response.data[i].name)); 
msgContainer.appendChild(o);