डीओएम में तत्वों को केवल शुद्ध जावास्क्रिप्ट (कोई jQuery)

Question

का उपयोग करके दिए गए सादे पाठ HTML में तत्व जोड़ें, मुझे HTML के कच्चे टेक्स्ट स्ट्रिंग वाले किसी पृष्ठ पर तत्व जोड़ने में सक्षम होना चाहिए, जिसमें टैग, विशेषताओं आदि शामिल हैं। आदर्श रूप से मैं अच्छी तरह से गठित एचटीएमएल की किसी भी मनमानी स्ट्रिंग के साथ कुछ करने में सक्षम होना चाहते हैं;

var theElement = document.createElement("<h1 id='title'>Some Title</h1><span style="display:inline-block; width=100px;">Some arbitrary text</span>"); 

document.getElementById("body").appendChild(theElement); 

स्पष्ट रूप से यह काम नहीं करता है, मैं एक ही परिणाम प्राप्त करने के अच्छे तरीकों की तलाश में हूं। यदि संभव हो तो मैं HTML को पार्स करना से बचना चाहता हूं। मैं उन उपकरणों पर गंभीर रूप से प्रतिबंधित हूं जिनका उपयोग मैं कर सकता हूं, कोई jQuery या बाहर शामिल नहीं है और क्रॉस-ब्राउज़र और पिछड़ा संगत आईई 6 होना चाहिए। कोई मदद बड़ी होगी।

Answer 1

एक गुमनाम तत्व की innerHTML property को बताए और उसके children से प्रत्येक जोड़कर प्रयास करें।

function appendHtml(el, str) { 
    var div = document.createElement('div'); 
    div.innerHTML = str; 
    while (div.children.length > 0) { 
    el.appendChild(div.children[0]); 
    } 
} 
var html = '<h1 id="title">Some Title</h1><span style="display:inline-block; width=100px;">Some arbitrary text</span>'; 
appendHtml(document.body, html); // "body" has two more children - h1 and span. 

Answer 2

आप उस तत्व का तत्व प्राप्त कर सकते हैं जिसके अंतर्गत आप HTML डालना चाहते हैं और HTML जोड़ने के लिए आंतरिक HTML का उपयोग करना चाहते हैं।

document.getElementById("body").innerHTML = "<h1 id='title'>Some Title</h1><span>test</span>"; 

Answer 3

var el = document.createElement("h1") 
el.id="title"; 
el.innerHTML = "Some title"; 
document.body.appendChild(el); 

var el2 = document.createElement("span") 
el2.style.display="block"; 
el2.style.width="100%"; 
el2.innerHTML = "Some arb text"; 
document.body.appendChild(el2); 

काम Shoud (बेला: http://jsfiddle.net/gWHVy/)

Answer 4

maerics समाधान सीधे मेरी समस्या ठीक हो गई। हालांकि मुझे अपनी जरूरतों को पूरा करने के लिए इसे त्वरित बदलाव करने की आवश्यकता थी। मेरे पास क्लिक पर लोड होने वाली कई स्क्रिप्ट और स्टाइलशीट हैं। मैं स्क्रिप्ट या स्टाइलशीट को वास्तविक वस्तुओं के रूप में डीओएम पोस्ट-लोड में नहीं जोड़ सकता। यदि आप <link rel="stylesheet" /> भाग रखने के लिए, document.body कहने के लिए आंतरिक HTML सेट करते हैं, तो यह केवल टेक्स्ट प्रिंट करेगा और ब्राउज़र इसे लिंक ऑब्जेक्ट के रूप में नहीं पहचाना जाएगा। इसे ठीक करने के लिए, मैंने निम्नलिखित कोड का उपयोग किया।

function appendHtml(el, str) { 
    var div = document.createElement('div'); 
    div.innerHTML = str; 
    while (div.children.length > 0) { 
     if (div.children[0].tagName == 'LINK') { 
      // Create an actual link element to append later 
      style = document.createElement('link'); 
      style.href = div.children[0].href; 
      // append your other things like rel, type, etc 
      el.appendChild(style); 
     } 
     el.appendChild(div.children[0]); 
    } 
}