निम्नलिखित सिंटैक्स का उपयोग करते समय प्रत्येक प्रकार की विशेषता और घटना के लिए वर्कअराउंड की खोज करने के बजाय:
elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);
क्या कोई ऐसा तरीका है जहां मैं सिर्फ पूरे HTML तत्व को स्ट्रिंग घोषित कर सकता हूं? पसंद:
elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);
जवाबों:
इसके साथ सीधे खिलवाड़ करने के बजाय innerHTMLएक टुकड़ा बनाने के लिए बेहतर हो सकता है और फिर वह डालें:
function create(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);
लाभ:
भले ही innerHTMLयह फ़ंक्शन के भीतर उपयोग किया जाता है, यह सब डोम के बाहर हो रहा है, इसलिए यह आपके विचार से बहुत तेज़ है ...
आप यह चाहते हैं
document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID">...</div>' );bodyतत्व पर काम नहीं करता है, लेकिन किसी अन्य तत्व पर ठीक काम करता है।
<body>। तथ्य की बात के रूप में, इसे चलाने के <body>लिए कंसोल के माध्यम से वेब पेजों में स्टाइल शीट जैसे सामान को इंजेक्ट करने का मेरा मानक तरीका है। आप क्या समस्या है?
<body>अपरिभाषित थे, तो अन्य सभी तत्व होंगे, इसलिए यह संभवतः Phill का मुद्दा नहीं है।
InsertAdjacentHTML पर एक नज़र डालें
var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>
स्थिति उस तत्व के सापेक्ष स्थिति है जिसे आप आसन्न में सम्मिलित कर रहे हैं:
'बिफोरजिन' तत्व से पहले
'आफ्टरबीन' तत्व के अंदर, अपने पहले बच्चे से पहले
'पहले' तत्व के अंदर, अपने आखिरी बच्चे के बाद
'आफ्टरएंड' तत्व के बाद
पुराने स्कूल जावास्क्रिप्ट में, आप यह कर सकते हैं:
document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML;आपकी टिप्पणी के जवाब में:
[...] मुझे एक तत्व के नहीं, एक नए तत्व की विशेषताओं और घटनाओं के स्रोत को घोषित करने में रुचि थी
innerHTML।
आपको नए HTML को DOM में इंजेक्ट करना होगा, हालाँकि; यही कारण innerHTMLहै कि पुराने स्कूल जावास्क्रिप्ट उदाहरण में प्रयोग किया जाता है। innerHTMLके BODYतत्व नई HTML के साथ prepended है। हम वास्तव में मौजूदा HTML को अंदर नहीं छू रहे हैं BODY।
मैं इसे स्पष्ट करने के लिए उपरोक्त उदाहरण को फिर से लिखूंगा:
var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>';
var bodyElement = document.body;
bodyElement.innerHTML = newElement + bodyElement.innerHTML;
// note that += cannot be used here; this would result in 'NaN'
जावास्क्रिप्ट फ्रेमवर्क का उपयोग करने से यह कोड बहुत कम हो जाएगा और पठनीयता में सुधार होगा। उदाहरण के लिए, jQuery आपको निम्न कार्य करने की अनुमति देता है:
$('body').prepend('<p id="foo">Some HTML</p>');document.getElementsByTagName('body')[0]वास्तव में document.body, अच्छी बात से प्रतिस्थापित किया जा सकता है । हालाँकि, यदि आप नए HTML को BODY के बजाय किसी अन्य मौजूदा तत्व के साथ बनाना या जोड़ना चाहते हैं, तो आपको इसका उपयोग करना होगा document.getElementById()और / या document.getElementsByTagName(); इसलिए मैंने इसका उदाहरण में इस्तेमाल किया।
मेरे ज्ञान के लिए, जो उचित है, काफी नया और सीमित है, इस तकनीक के साथ एकमात्र संभावित मुद्दा यह तथ्य है कि आपको गतिशील रूप से कुछ तालिका तत्वों को बनाने से रोका जाता है।
मैं किसी छुपे हुए DIV में "टेम्प्लेट" तत्वों को जोड़कर टेम्प्लेट करने के लिए एक फॉर्म का उपयोग करता हूं और फिर क्लोन बनाने के लिए क्लोन (सही) का उपयोग करके इसे आवश्यकतानुसार जोड़ देता हूं। इंड इन भालू कि आपको दोहराव से बचाव के लिए आईडी को फिर से असाइन करना सुनिश्चित करने की आवश्यकता है।
जैसा कि दूसरों ने कहा कि सुविधाजनक jQuery के प्रीपेन्ड कार्यक्षमता का अनुकरण किया जा सकता है:
var html = '<div>Hello prepended</div>';
document.body.innerHTML = html + document.body.innerHTML;
जबकि कुछ का कहना है कि इनर HTML के साथ "गड़बड़" न करना बेहतर है , यह कई उपयोग के मामलों में विश्वसनीय है, यदि आप यह जानते हैं:
एक तो
<div>,<span>या<noembed>नोड एक बच्चे पाठ नोड कि वर्ण शामिल हैं (है&), (<), या (>), innerHTML के रूप में इन पात्रों रिटर्न&,<और>क्रमशः।Node.textContentइन टेक्स्ट नोड्स की सामग्री की एक सही प्रतिलिपि प्राप्त करने के लिए उपयोग करें ।
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
या:
var html = '<div>Hello prepended</div>';
document.body.insertAdjacentHTML('afterbegin', html)
insertAdjacentHTMLसंभवतः एक अच्छा विकल्प है: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
यदि आप मौजूदा पेज के टैग जेनरेटर के अंदर HTML कोड डालना चाहते हैं । यह उपकरण विशेष रूप से इस लक्ष्य के लिए बनाया गया था।
इसके बजाय अगला कोड लिखने की
var htmlCode = '<ul class=\'menu-countries\'><li
class=\'item\'><img src=\'au.png\'></img><span>Australia </span></li><li
class=\'item\'><img src=\'br.png\'> </img><span>Brazil</span></li><li
class=\'item\'> <img src=\'ca.png\'></img><span>Canada</span></li></ul>';
var element = document.getElementById('myTag');
element.innerHTML = htmlCode;आप अधिक समझने योग्य संरचना लिख सकते हैं
var jtag = $j.ul({
class: 'menu-countries',
child: [
$j.li({ class: 'item', child: [
$j.img({ src: 'au.png' }),
$j.span({ child: 'Australia' })
]}),
$j.li({ class: 'item', child: [
$j.img({ src: 'br.png' }),
$j.span({ child: 'Brazil' })
]}),
$j.li({ class: 'item', child: [
$j.img({ src: 'ca.png' }),
$j.span({ child: 'Canada' })
]})
]
});
var htmlCode = jtag.html();
var element = document.getElementById('myTag');
element.innerHTML = htmlCode;