मेरे पास निम्नलिखित नमूना कोड हैं। मैं जावास्क्रिप्ट कोड के अंदर id="section" में कुछ वर्ग जोड़ने की कोशिश कर रहा हूं लेकिन असफल रहा। त्रुटि: टिप्पणी कोड को हटाते समय अशक्त की संपत्ति 'classList' नहीं पढ़ सकता। किसी भी मदद की बहुत सराहना की जाएगी!
भाग 1:
var template = document.querySelector('#container').innerHTML;
var contents = '';
var section = document.createElement("div");
// These two lines cause the error
var section = document.getElementById("section");
section.classList.add("bg-yellow");
contents = template.replace(/\{\{title\}\}/, "Title");
section.insertAdjacentHTML('beforeend', contents);
document.getElementById('content').appendChild(section);
भाग 2: (रैंडी कैसबर्न के मूल उत्तर से अद्यतन)
var data = [{
"Title": "One"},
{"Title": "Two"},
{"Title": "Three"}];
var template = document.querySelector('#container').innerHTML;
var contents = '';
var section = document.createElement("div");
for(var i = 0; i < data.length; i++){
contents += template.replace(/\{\{title\}\}/, data[i].Title);
}
section.innerHTML = contents;
var innerSection = section.querySelector("#section");
innerSection.classList.add("bg-yellow","blue");
document.getElementById('content').appendChild(section);.sub-section{
background: tomato;
width: 100px;
}
.bg-yellow{
background: yellow!important;
width: 100%;
height: auto;
}
.blue{
color: blue!important;
}<div id="content"></div>
<script type="template" id="container">
<div id="section">
<div class="sub-section">
<h1>{{title}}</h1>
</div>
</div>
</script>2 जवाब
यह पूरा करना काफी सरल है। div बनाएं और इसकी innerHTML टेम्पलेट सामग्री के रूप में सेट करें। फिर div को DOM में जोड़ें।
आप सही रास्ते पर थे, लेकिन एक महत्वपूर्ण कदम को छोड़ दिया।
var data = [{
"Title": "One"},
{"Title": "Two"},
{"Title": "Three"}];
var template = document.querySelector('#container').innerHTML;
var contents = '';
for(var i = 0; i < data.length; i++){
contents += template.replace(/\{\{title\}\}/, data[i].Title);
}
//var contents = template.replace(/\{\{title\}\}/, "Title");;
var section = document.createElement("div");
section.innerHTML = contents;
var innerSection = section.querySelectorAll(".section");
innerSection.forEach(el=>el.classList.add("bg-yellow"));
document.getElementById('content').appendChild(section);.sub-section {
background: tomato;
width: 100px;
}
.bg-yellow {
background: yellow!important;
width: 100%;
height: auto;
}<div id="content"></div>
<script type="template" id="container">
<div class="section">
<div class="sub-section">
<h1>{{title}}</h1>
</div>
</div>
</script>संपादित करें: ओपी ने प्रश्न में उपयोग के मामले को बदल दिया, इसलिए यह नए प्रश्न को दर्शाने के लिए उत्तर को अद्यतन करता है: - /
यदि आप स्क्रिप्ट टैग में जावास्क्रिप्ट के अलावा कोई अन्य सामग्री प्रकार निर्दिष्ट करते हैं (या अन्य स्क्रिप्टिंग भाषा जिसे ब्राउज़र समझता है), तो ब्राउज़र द्वारा इसकी व्याख्या नहीं की जाएगी, और आप इसे केवल सादे पाठ के रूप में एक्सेस कर सकते हैं।
रेफर करें (
आपके पास html DOM नहीं है जिसे आपने स्क्रिप्ट में रखा है लेकिन आप उस पर क्वेरी करने का प्रयास कर रहे हैं।