JQuery | parseHTML() method

Last Updated : 27 Apr, 2020

This parseHTML() Method in jQuery is used to parses a string into an array of DOM nodes.

Syntax:

jQuery.parseHTML(data [, context ] [, keepScripts ])

Parameters: The parseXML() method accepts three parameter that is mentioned above and described below:

data: This parameter is the HTML string to be parsed.
context : This parameter is the document element to serve as the context in which the HTML fragment will be created.
keepScripts : This parameter is the boolean indicating whether to include scripts passed in the HTML string.

Return Value:

Example 1: In this example, the parseHTML() Method a string is parsed into an array of DOM nodes.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery | parseHTML() method</title> 
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  
</head>
<body style="text-align:center;"> 
      
    <h1 style="color: green"> 
        GeeksForGeeks 
    </h1> 
      
    <h3>JQuery | parseHTML() method</h3>
    <pre id="geek">
    </pre>
       
    <script>
        var $geek = $( "#geek" ),
          str = "A <b>computer science portal</b> for <b>geeks</b>",
          html = jQuery.parseHTML( str ),
          nodeNames = [];
           
        $geek.append( html );
    </script>
</body>
</html>                                                                                

Output:

Example 2: In this example, the parseHTML() Method create an array of DOM nodes using an HTML string and insert it into a div.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery | parseHTML() method</title> 
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  
</head>
<body style="text-align:center;"> 
      
    <h1 style="color: green"> 
        GeeksForGeeks 
    </h1> 
      
    <h3>JQuery | parseHTML() method</h3>
    <div id="geek">
    </div>
       
    <script>
        var $geek = $( "#geek" ),
          str = "A <b>computer science portal</b> for <b>geeks</b>",
          html = jQuery.parseHTML( str ),
          nodeNames = [];
           
        $geek.append( html );
           
        $.each( html, function( i, el ) {
          nodeNames[ i ] = "<li>" + el.nodeName + "</li>";
        });
           
        $geek.append( "<h3>Node Names:</h3>" );
        $( "<b></b>" )
          .append( nodeNames.join( "" ) )
          .appendTo( $geek );
    </script>
</body>
</html>                            

Output:

My Personal Notes

Related Articles