How to convert html string into jquery dom object in javascript

Recent project requirements are to develop an application related to Baidu Maps. You need to extract the elements and attribute information you want from the hard-coded HTML string. Since you use dom to operate element nodes and attributes in js or jq, object or jq object. The following introduces the method of converting html string into jquery dom object in javascript. Friends who need it can refer to

The original html string is as follows:

var text="<p id=&#39;overLay&#39; style=&#39;width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;&#39;>"
        + "<img  style=&#39;margin-left:4px;margin-top: 3px;&#39; src=&#39;ima.png&#39;    style="max-width:90%"How to convert html string into jquery dom object in javascript" >"
        + "</p>";

　1. Next, use the Jquery library to convert the text string variable into a Jquery object.

Jquery code is as follows:

　　alert($(text).html());

Where $(text) is the text string converted to a Jquery object, and finally use the html() of the Jquery object to output the html content in the form of a string

. The result is as follows:

<img  style=&#39;margin-left:4px;margin-top: 3px;&#39; src=&#39;ima.png&#39;    style="max-width:90%"How to convert html string into jquery dom object in javascript" >

It shows that the $(text)Jquery object represents the outermost html element p.

　2. Convert Jquery objects and DOM objects to each other.

The code is as follows:

var element= $(text).get(0) //element就是一个dom对象
　　var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。

Note: The difference between DOM objects and Jquery objects

In my understanding, Jquery objects and DOM objects are encapsulated html elements. You can operate html element nodes to facilitate programming, but some methods between them cannot be shared, such as html() of Jquery objects. method, the DOM object cannot be used; and the GetElementById() of the DOM object cannot be used by the Jquery object. Therefore, mutual conversion can be performed when necessary.

　3. Use js code to convert the text string variable into a DOM object.

The js code is as follows:

/*字符串转dom对象*/
function loadXMLString(txt) 
{
  try //Internet Explorer
   {
     xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
     xmlDoc.async="false";
     xmlDoc.loadXML(txt);
     //alert('IE');
     return(xmlDoc); 
   }
  catch(e)
   {
     try //Firefox, Mozilla, Opera, etc.
      {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(txt,"text/xml");
       //alert('FMO');
        return(xmlDoc);
      }
     catch(e) {alert(e.message)}
   }
  return(null);
}

The js code converts the text string into a DOM object and It's browser dependent, so. . . . . . Write separately.

In this way, the conversion of html strings to Jquery objects and DOM objects is realized.

Introduction to the conversion methods between jQuery objects and dom objects

When you first start learning jQuery, you may not be able to tell which are jQuery objects and which are DOM objects. As for the DOM object, there is not much explanation. We have come into contact with too many. Let’s focus on jQuery and the conversion between the two.

What is a jQuery object?

---It is the object generated by wrapping the DOM object through jQuery. The jQuery object is unique to jQuery and can use methods in jQuery.

For example:

$("#test").html() means: get the html code in the element with ID test. Among them, html() is a method in jQuery

This code is equivalent to using DOM to implement the code:

document.getElementById("id").innerHTML;
Although jQuery objects are generated after wrapping DOM objects, jQuery cannot use any methods of DOM objects. Similarly, DOM objects cannot use methods in jQuery. If used indiscriminately, an error will be reported. For example: $("#test").innerHTML, document.getElementById("id").html() and other writing methods are wrong.

Another thing to note is that the jQuery object obtained by using #id as the selector and the DOM object obtained by document.getElementById("id") are not equivalent. Please see the conversion between the two below.

Since jQuery is different but also related, jQuery objects and DOM objects can also be converted to each other. Before converting the two, we first make a convention: if a jQuery object is obtained, then we add $ in front of the variable, such as: var $variab = jQuery object; if a DOM object is obtained, it is the same as usual. : var variab = DOM object; this convention is only for convenience of explanation and distinction, and is not stipulated in actual use.

Convert jQuery object to DOM object:

Two conversion methods convert a jQuery object into DOM object: [index] and .get(index);

(1) The jQuery object is a data object, and the corresponding DOM object can be obtained through the [index] method.

For example:

var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery itself provides it, and through the .get(index) method, the corresponding DOM object

such as:

var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

DOM object converted into jQuery object:

For a DOM object that is already a DOM object, you only need to wrap the DOM object with $() to get a jQuery object. $(DOM object)

For example:

var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象

After conversion, you can use any jQuery method.

Through the above methods, jQuery objects and DOM objects can be converted to each other at will. What needs to be emphasized again is that only DOM objects can use methods in DOM, and jQuery objects cannot use methods in DOM.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to change the original content of html through js

The above is the detailed content of How to convert html string into jquery dom object in javascript. For more information, please follow other related articles on the PHP Chinese website!