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

एचटीएमएल डोम डालने से पहले () विधि

<घंटा/>

HTML DOM insertBefore () विधि पहले से मौजूद चाइल्ड नोड से पहले एक नया नोड सम्मिलित करती है।

सिंटैक्स

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

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

node.insertBefore(newNode, existingNode)

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

पैरामीटर

पैरामीटर विवरण
newNode यह नव निर्मित चाइल्ड नोड है जिसे शुरुआत में जोड़ा जाना है
मौजूदा नोड यह पहले से मौजूद नोड है

उदाहरण

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

<!DOCTYPE html>
<html>
<head>
<title>insertBefore()</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   ol {
      width:30%;
      margin: 0 auto;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>insertBefore( )</legend>
<h1>How to make tea</h1>
<h3>Steps:</h3>
<ol id="stepList">
<li>Add Tea Bag</li>
<li>Add Sugar</li>
<li>Add Milk</li>
</ol>
<input type="button" onclick="addStep()" value="Add">
</fieldset>
</form>
<script>
   function addStep() {
      var newIngredient = document.createElement("LI");
      var textnode = document.createTextNode("Boil Water");
      newIngredient.appendChild(textnode);
      var stepList = document.getElementById("stepList");
      stepList.insertBefore(newIngredient, stepList.childNodes[0]);
   }
</script>
</body>
</html>

आउटपुट

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

'जोड़ें' . क्लिक करने से पहले बटन -

एचटीएमएल डोम डालने से पहले () विधि

‘जोड़ें’ clicking क्लिक करने के बाद बटन -

एचटीएमएल डोम डालने से पहले () विधि


  1. HTML DOM getBoundingClientRect () विधि

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

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

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

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

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