Creating a Jquery Object from a Big HTML-String

Creating a jQuery object from a big HTML-string

Update:

From jQuery 1.8, we can use $.parseHTML, which will parse the HTML string to an array of DOM nodes. eg:

var dom_nodes = $($.parseHTML('<div><input type="text" value="val" /></div>'));

alert( dom_nodes.find('input').val() );

DEMO

---

var string = '<div><input type="text" value="val" /></div>';

$('<div/>').html(string).contents();

DEMO

What's happening in this code:

• $('<div/>') is a fake <div> that does not exist in the DOM
• $('<div/>').html(string) appends string within that fake <div> as children
• .contents() retrieves the children of that fake <div> as a jQuery object

If you want to make .find() work then try this:

var string = '<div><input type="text" value="val" /></div>',
    object = $('<div/>').html(string).contents();

alert( object.find('input').val() );

DEMO

Creating a jQuery DOM object from a complete HTML document

Apparently, I didn't try hard enough with the trick in the link mentioned in the question, and the input is not too complex for the little jQuery parser, because it all works nicely with this modified line:

var dHtml = $('<div></div>').html(sHtml);

This puts the entire head and body parts in the single top-level div. No problem with the DOCTYPE line in the input string. jQuery find() works to find everything.

Get HTML String for jQuery and/or DOM object

try the dom property .outerHTML

Transforming html (text) to jQuery object : lost value

It's pretty clunky and unpleasant but you could parse it thus

var test = "<span></span> spanValue";//turn it into VALID html and parse it.var jq = $($.parseHTML(test));console.log(jq.text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jQuery: extract top-most SVG element from HTML string with multiple nodes

You cannot use find on the result because the markup you give to jQuery doesn't represent a tree: Doctype and comments nodes are siblings of your <svg>.

Thus, you need filter the jQuery entries in order to keep only the svg node:

const $svg = $(`<?xml version="1.0" encoding="utf-8"?><!-- comment1  --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 424 424">  <g>    <g>      <path d="M35,89C15,89,0,74,0,54s15-36,35-36h353c20,0,36,16,36,36s-16,35-36,35H35z" fill="#7c7a7d"/>      <path d="M388,176c20,0,36,16,36,36s-16,35-36,35H35c-20,0-35-15-35-35s15-36,35-36H388z" fill="#7c7a7d"/>      <path d="M388,335c20,0,36,15,36,35s-16,36-36,36H35c-20,0-35-16-35-36s15-35,35-35H388z" fill="#7c7a7d"/>    </g>  </g></svg>`).filter((i, el) => $(el).is('svg'));
console.log($svg.attr('id'));$svg.find('path').attr('fill', 'red');$('body').append($svg);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Convert string into jQuery object and select inner element

This will create elements from the html and find the a1 element:

var element = $('<div id="a1"></div><div id="a3"></div>').filter('#a1').get(0);

Parse entire HTML document from string into jQuery

The reason why it does not work is because jQuery expects a DOM node to find the 'title' tags. As you noted, you need to parse the html text first.

From here and here, the solution is to parse the string and append it into a temporal div (or other element):

var tempDom = $('<div></div>').append($.parseHTML(str));

Then, you can manipulate tempDom to find elements.

Working demo: http://codepen.io/anon/pen/wKwLMP

jQuery - from an HTML string, find all elements with a given data attribute

That is because you don't have a root element. Just temporarily use wrapAll during the query.

var html = '<div class="container-fluid"><div class="row-fluid"><div data-inject="TowerLogsViewModel" class="span12"></div></div></div><div data-inject="TowerLogFormViewModel" class="navbar navbar-fixed-bottom"></div>';
var $html = $(html);

$('[data-inject]', $html.wrapAll($('<div>')).parent()).each(function (ix, el) {
    console.log($(el).data('inject'));
});

Demo

Due to the absence of root element the collection this will find data-inject from the first element in the collection i.e <div class="container-fluid"> so you get only one. if you use filter you will get only the other one. Hence wrap them temporarily.

---

Related Topics