HTML के स्ट्रिंग के बजाय DOM में html एलिमेंट अप्लाई करें

मैं शुद्ध स्ट्रिंग के बजाय किसी अनुभाग में एक तत्व कैसे जोड़ सकता हूं?

मैं परिशिष्ट() का उपयोग करने की कोशिश कर रहा हूं, लेकिन यह मेरे html की व्याख्या नहीं करता है।

शायद ऐसा करने का अधिक AngularJS तरीका है जिसके बारे में मुझे जानकारी नहीं है।

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

document.getElementsByClassName("left-menu")[0].append(
  '<div class="adverts-container top30">' +
    '<div class="advert-carousel">' +
      'Message' +
    '</div>' +
  '</div>'
);
        

</div> </div>

0

5 उत्तर

ParentNode.append() method inserts a set of Node objects or DOMString not the htmlString.

मुझे कोणीय तरीका नहीं पता है लेकिन आप का उपयोग कर सकते हैं डालने के लिए शुद्ध जावास्क्रिप्ट में htmlString सम्मिलित करने के लिए AdAdjacentHTML()

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

document.getElementsByClassName("left-menu")[0].insertAdjacentHTML( 'beforeend',
  '<div class="adverts-container top30">' +
    '<div class="advert-carousel">' +
      'Message' +
    '</div>' +
  '</div>'
);
        

</div> </div>

4
जोड़ा

आपको HTML स्ट्रिंग को किसी अन्य तत्व में जोड़ना चाहिए और इसे बाएं-मेनू तत्व में जोड़ना चाहिए:

var tmp=document.createElement('div');
tmp.innerHTML='<div class="adverts-container top30">' +'<div class="advert-carousel">' +'Message' +'</div>' +'</div>';
document.getElementsByClassName("left-menu")[0].appendChild(tmp.firstChild);
3
जोड़ा

वहाँ निश्चित रूप से है। आम तौर पर, आप कभी भी AngularJS में jQ का उपयोग नहीं करना चाहते हैं, और केवल AngularJS द्वारा प्रदान नहीं की जाने वाली चीजों के लिए वेनिला है। यहाँ आप देखने के लिए बाध्यकारी कर रहे हैं। MVsomething ढांचा होने के नाते यह निश्चित रूप से कुछ AngularJs प्रदान करता है।

कारण? निरर्थक और सरल शब्दों में, AngularJS के अपने तरीके हैं जो डेटा बाइंडिंग इत्यादि जैसी साफ-सुथरी चीजें सुनिश्चित करते हैं यदि आप इसके नियमों का पालन नहीं करते हैं तो आप अपने द्वारा प्राप्त की जाने वाली साफ-सुथरी चीजों को तोड़ देंगे।

यहाँ आधुनिक AngularJS में ऐसा करने का एक डेमो दिया गया है:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

    


</div> <script> var app = angular.module("myApp", ['ngSanitize']); app.controller("myCtrl", function($scope) { $scope.myText = "My name is:

John Doe

";
});
</script>

यह काफी सरल है। आप HTML को एक स्ट्रिंग के रूप में परिभाषित करते हैं, इसे उस दायरे में बाँधते हैं, जो किसी अन्य डेटा की तरह है जिसे आप दृश्य में सुलभ चाहते हैं और फिर बस ng-bind-html का उपयोग करके HTML इंजेक्षन करने का निर्देश तत्व में जहां आप निर्देश का उपयोग कर रहे हैं।

नीट, सरल, सुरक्षित और परिणाम किसी अन्य टेम्प्लेट के रूप में काम करेगा जो सांख्यिकीय रूप से लिखा गया है, आप डेटा को इससे जोड़ सकते हैं और इसके साथ कोई अतिरिक्त परेशानी नहीं है, पाचन चक्र भी हमेशा की तरह काम करेगा।

0
जोड़ा
तब आप या तो कोणीय नियंत्रण को पदानुक्रम में अधिक लपेटते हैं, इसलिए इसमें प्रश्न में भाग शामिल होता है या यह AngularJS प्रश्न बिल्कुल भी नहीं है और टैग की आवश्यकता नहीं है। नियमित वनीला डोम संयोजन को अपने चयन के साथ डोम के मूल नोड को चुनने और एपेंड() विधि का उपयोग करके उस पर HTML इंजेक्षन करें।
जोड़ा लेखक DanteTheSmith, स्रोत
मैं पूरी तरह से समझता हूं। मेरा मुद्दा 'बाएं-मेनू' उस नियंत्रक या टेम्पलेट के भीतर नहीं है जिस पर मैं यह असाइनमेंट लिखता हूं। यह पदानुक्रम से पूरी तरह ऊपर है, इसीलिए मैं इसके बजाय इस वर्कअराउंड को आज़मा रहा हूं।
जोड़ा लेखक LazioTibijczyk, स्रोत
मुझे यकीन नहीं है कि मैं भव्य-अभिभावक के चर का संदर्भ कैसे दूंगा और उन्हें इस दृष्टिकोण का उपयोग करने के लिए निर्धारित करूंगा।
जोड़ा लेखक LazioTibijczyk, स्रोत

मैं इस पर कोई विशेषज्ञ नहीं हूं, लेकिन मुझे विश्वास नहीं है कि ऐप्पल HTML कोड को पार्स करेगा। यदि आप तत्व उत्पन्न करने के लिए पहले document.createElement का उपयोग करते हैं, तो आप उस बनाए गए तत्व को DOM में जोड़ने के लिए परिशिष्ट का उपयोग कर सकते हैं।

0
जोड़ा

इसे इस्तेमाल करे:

var el = document.createElement("div");
el.className = "adverts-container top30";
el.innerHTML = '<div class="advert-carousel">' +
                    'Message' +
                '</div>';
document.querySelectorAll(".left-menu")[0].append(el);
0
जोड़ा