Convert htmlString to Dom object in Javascript - javascript

I made a http request and received a htmlString, now I want to convert it to Dom object to query its elements.
Thanks for you help

You can create a container object (I've used a div here) and then assign your html string to .innerHTML and then you can query the child objects that are created.
var container = document.createElement("div");
container.innerHTML = htmlString;
The child nodes of the container object are what is created from your HTML.

using jQuery you could do something like this:
var yourStringFromServer = '<div><div id="helloWrap"></div></div>';
var a = $(yourStringFromServer); // create new jQuery instance with string
a.find('#helloWrap').html('hello'); // find the helloWrap node and set html
a.appendTo('body'); // append html to body

Related

Delete elements in a javascript string

I have a string containing html elements, now I need to select some elements and remove them from the string.
In JQuery I tried the following:
html_string = "<ul><li data-delete>A<li><li>B</li></ul>";
html_clean_string = $(html_string).remove('[data-delete]').html();
This is what I expected:
"<ul><li>B</li></ul>"
But I got the same original string. So how can I use CSS selectors to remove html elements from a string?
You can do it like this:
var html_string = "<ul><li data-delete>A</li><li>B</li></ul>";
var elems = $(html_string);
elems.find('[data-delete]').remove();
var html_clean_string = elems[0].outerHTML;
You had a couple of issues:
.remove() only operates on the elements in the jQuery object, not on child object so you have to .find() the appropriate child elements before you can remove them.
Since you want the host top level HTML too, you will need the .outerHTML.
You had mistakes in your html_string.
Working jsFiddle: http://jsfiddle.net/jfriend00/x8ra6efz/
You can also save a little jQuery with more chaining like this:
var html_string = "<ul><li data-delete>A</li><li>B</li></ul>";
var html_clean_string = $(html_string).find('[data-delete]').remove().end()[0].outerHTML;
Working jsFiddle:http://jsfiddle.net/jfriend00/wmtascxf/

How to execute document.querySelectorAll on a text string without inserting it into DOM

var html = '<p>sup</p>'
I want to run document.querySelectorAll('p') on that text without inserting it into the dom.
In jQuery you can do $(html).find('p')
If it's not possible, what's the cleanest way to to do a temporary insert making sure it doesn't interfere with anything. then only query that element. then remove it.
(I'm doing ajax requests and trying to parse the returned html)
With IE 10 and above, you can use the DOM Parser object to parse DOM directly from HTML.
var parser = new DOMParser();
var doc = parser.parseFromString(html, "text/html");
var paragraphs = doc.querySelectorAll('p');
You can create temporary element, append html to it and run querySelectorAll
var element = document.createElement('div');
element.insertAdjacentHTML('beforeend', '<p>sup</p>');
element.querySelectorAll('p')

How to im-plement $("<div class='wrapper'><span>Somw text</span></div>") in native javascript?

$("<div class='wrapper'><span>Somw text</span></div>")
This piece of code gives me jQuery wrapped object which has the mentioned dom ements. I want to know how can we write the same functionality in native javascript. Is there a DOM API which allows us to pass the well-formed html as string and return the dom node or do we need to parse the string of html and create a document fragment out of it and append the child nodes as we get them.
function getDomFromHtml(htmlStr){
// some logic ????
return node;
}
Create container div, then put string to innerHTML, then return firstChild of container div.
function getDomFromHtml (htmlStr){
var container = document.createElement("div");
container.innerHTML = htmlStr;
return container.firstChild;
}
fiddle: http://jsfiddle.net/NzHRc/

How can I manipulate the DOM from a string of HTML in JavaScript?

I'm developing a Windows 8 Metro App using JavaScript. I need to manipulate a string of HTML to select elements like DOM.
How can I do that?
Example:
var html = data.responseText; // data.response is a string of HTML received from xhr function.
// Now I need to extract an element from the string like document.getElementById("some_element")...
Thanks!
UPDATE:
I solved!
var parser = new DOMParser();
var xml = parser.parseFromString(data.responseText);
I think your approach to the problem isn't the best, you could return JSON or xml. But if you need to do it that way:
To my knowledge you wont be able to use getElementById without inserting a new element in the document (in the example below, doing inserting div in document, for example document.appendChild(div)), but you could do this:
var div = document.createElement("div");
div.innerHTML = '<span id="rawr"></span>'; //here you would put data.responseText
var elements = div.getElementsByTagName("span"); // [<span id="rawr"></span>], there you could ask elements[0].id === "rawr" or whatever you like

jQuery - hide a element inside a html string

I have a ajax function that retrieves some data as html.
How can I hide a certain element from this html string? $(data).find(".element").hide() doesn't work...
Are you sure it doesn't work? A common mistake is to assume that the string itself is modified.
Try this instead:
var $data = $(data); // create new DOM elements, and keep a reference to them
$data.find(".element").hide(); // find and hide .element
$data.appendTo('wherever'); // append the new elements
Another possibility is that the .element is at the top level of the of the HTML that was returned.
If that's the case you'd need the filter()(docs) method instead of the find()(docs) method .
var $data = $(data); // create new DOM elements, and keep a reference to them
$data.filter(".element").hide(); // filter and hide .element
$data.appendTo('wherever'); // append the new elements
Last thing to try would be wrapping the entire HTML in a <div> element, then doing a .find().
// var $data = $('<div>' + data + '</div>'); // original version
var $data = $('<div>').append( data ); // this may be better. not sure.
$data.find(".element").hide();
$data.children().appendTo('wherever');

Categories

Resources