Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

HTML DOM सम्मिलित करेंआसन्नHTML( ) विधि

<घंटा/>

HTML DOM insertAdjacentHTML() विधि टेक्स्ट स्ट्रिंग को HTML के रूप में निर्दिष्ट स्थान पर सम्मिलित करती है।

सिंटैक्स

निम्नलिखित वाक्य रचना है -

पोजिशनस्ट्रिंग और एचटीएमएल कोड के पैरामीटर के साथ इंसर्टएडजसेंटएचटीएमएल() को कॉल करना

node.insertAdjacentHTML(“positionString”, “htmlString”)

स्थिति स्ट्रिंग्स

यहां, पोजीशनस्ट्रिंग निम्नलिखित हो सकते हैं -

positionString विवरण
बाद में यह नोड तत्व की शुरुआत के बाद htmlString सम्मिलित करता है
आफ्टरएंड यह नोड तत्व के बाद htmlString सम्मिलित करता है
शुरुआत से पहले यह नोड तत्व से पहले htmlString सम्मिलित करता है
पहले यह नोड तत्व के अंत से पहले htmlString सम्मिलित करता है

एचटीएमएल स्ट्रिंग्स

और, "htmlString" निम्नलिखित हो सकते हैं -

positionString
नई अवधि या

यह एक नया पैराग्राफ है


या कोई अन्य मान्य HTML कोड

उदाहरण

आइए InsertAdjacentHTML() . के लिए एक उदाहरण देखें विधि -

<!DOCTYPE html>
<html>
<head>
<title>insertAdjacentHTML()</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>insertAdjacentHTML( )</legend>
<h1>Family Tree</h1>
<span id="GrandFather">Grand Father --></span>
<span id="Father">Father --></span>
<span id="Myself">Myself</span>
<input type="button" onclick="rectifyTree()" value="Son is born">
</fieldset>
</form>
<script>
   function rectifyTree() {
      var MSpan = document.getElementById("Myself");
      MSpan.insertAdjacentHTML("afterend", "<span id='Son'>-->Son</span>");
   }
</script>
</body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

'बेटे का जन्म . पर क्लिक करने से पहले ' बटन -

HTML DOM सम्मिलित करेंआसन्नHTML( ) विधि

'बेटे का जन्म . पर क्लिक करने के बाद ' बटन -

HTML DOM सम्मिलित करेंआसन्नHTML( ) विधि


  1. HTML DOM getBoundingClientRect () विधि

    HTML DOM getBoundingClientRect () का उपयोग व्यूपोर्ट की स्थिति के सापेक्ष एक तत्व के आकार को वापस करने के लिए किया जाता है। यह DOMRect प्रकार की वस्तु देता है जिसमें आठ गुण बाएँ, ऊपर, दाएँ, नीचे, x, y, चौड़ाई, ऊँचाई हैं। स्क्रॉलिंग स्थिति में परिवर्तन होने पर बाउंडिंग आयत की स्थिति बदल जाती है। सिंट

  1. HTML DOM में विशेषताएँ () विधि है

    HTML DOM में एट्रिब्यूट्स () विधि यह जांचती है कि किसी तत्व में कोई विशेषता है या नहीं। यदि तत्व में कोई विशेषता है तो यह सही है और यदि नहीं है तो यह गलत है। यदि इस विधि को तत्व नोड के अलावा किसी अन्य नोड पर कहा जाता है, तो लौटाया गया मान हमेशा गलत होगा। सिंटैक्स hasAttributes() विधि के लिए सिंटैक्

  1. एचटीएमएल डोम फोकस () विधि

    HTML तत्व पर फ़ोकस देने के लिए HTML DOM फ़ोकस () विधि का उपयोग किया जाता है। सभी HTML तत्वों पर फ़ोकस लागू नहीं किया जा सकता है। उदाहरण के लिए:आप टैग पर फ़ोकस नहीं कर सकते। किसी तत्व से फ़ोकस हटाने के लिए ब्लर () विधि का उपयोग करें। सिंटैक्स निम्नलिखित वाक्य रचना है - HTMLElementObject.focus() उदा