Find element in document using HTML DOM

Question

I need to be able to select and modify an element in an HTML document. The usual way to find an element using jQuery is by using a selector that selects by attribute, id, class or element type. However in my case I have the element's HTML DOM and I want to find the element on my document that matches this DOM.

Important :

I know I can use a class selector or ID selector etc.. but sometimes the HTMLs I get don't have a class or an ID or an attribute to select with, So I need to be able to select from the element's HTML.

For example here is the element I need to find :

<span class='hello' data='na'>Element</span>

I tried to use jQuery's Find() but it does not work, here is the jsfiddle of the trial : https://jsfiddle.net/ndn9jtbj/

Trial :

el = jQuery("<span class='hello' data='na'>Element</span>");
jQuery("body").find(el).html("modified element");

The following code does not make any change on the element that is present in my HTML and that corresponds to the DOM I have supplied. Is there any way to get the desired result either using native Javascript or jQuery?

Please try this: `jQuery("body").find(el).html("modified html");` — Mihai Alexandru-Ionut, Nov 26 '16 at 17:11
So what's wrong with using any relevant selector, e.g: `$('i.fa.fa-camera').html("modified html");`??? — A. Wolff, Nov 26 '16 at 17:15
@Alexandru-IonutMihai I tried body also but with the same result — Faouzi FJTech, Nov 26 '16 at 17:16
@A.Wolff I can't use the selectors that way because of the way I structure data, I need to be able to select using the full html DOM of the element needed. — Faouzi FJTech, Nov 26 '16 at 17:17
@FaouziFJTech Do you mean you want something like this: `el = jQuery('').html("modified html").appendTo('body');`? It is really not clear what is your expected behaviour imho. I don't get if it is an element already available in the DOM or an disconnected element you just created — A. Wolff, Nov 26 '16 at 17:18
@A.Wolff nope I don't wanna add that element to the body, that element already exists on the body and I use its HTML string to find it and modify it. — Faouzi FJTech, Nov 26 '16 at 17:19
@FaouziFJTech So i really don't get why you can't use any relevant CSS selector?! You should really improve question with a minimalistic sample replicating your issue — A. Wolff, Nov 26 '16 at 17:20
@A.Wolff I don't want to use a selector, I need to use that data since this is the data I get, sometimes some HTML strings I need to find will not have selectors means no class , no ID etc... so can only use its external HTML to find it. Here's an example of the problem in this JSFiddle : https://jsfiddle.net/ndn9jtbj/ — Faouzi FJTech, Nov 26 '16 at 17:22
@A.Wolff can you post your answer that involves the filter in a post, that's the only solution that worked, in my case it would be reliable because I save the whole document and that html element, so they will always match with the browser parsing since I save that parsing. — Faouzi FJTech, Nov 26 '16 at 17:31
@FaouziFJTech If you mean something like this: https://jsfiddle.net/ndn9jtbj/3/ This is a no go for sure because browser can parse element differently so this isn't a reliable way to filter any element, using outerHTML property (nor inner HTML one btw) EDIT: ok, cross posting comments ;) — A. Wolff, Nov 26 '16 at 17:31

score 3 · Accepted Answer · answered Nov 26 '16 at 17:33

3

You could filter it by outerHTML property if you are sure how browser had parsed it:

var $el = jQuery("body *").filter(function(){
   return this.outerHTML === '<span class="hello" data="na">Element</span>';
});
$el.html("modified element");

answered Nov 26 '16 at 17:33

A. Wolff

74,033
9
94
155

That's the only solution that worked, thanks a ton ! – Faouzi FJTech Nov 26 '16 at 17:34
1

This is both clever and a little bit horrible. +1 – lonesomeday Nov 26 '16 at 17:39

lonesomeday · Answer 2 · 2016-11-26T17:30:04.590

el = jQuery('<i class="fa fa-camera"></i>');

This does not say "find the element that looks like <i class="fa fa-camera"></i>". It means "create a new i element with the two classes fa and fa-camera. It's the signature for creating new elements on the fly.

jQuery selectors look like CSS, not like HTML. To find the i element with those two classes, you need a selector like i.fa.fa-camera.

Furthermore $("document") looks for an HTML element called document. This does not exist. To select the actual document, you need $(document). You could do this:

$(document).find('i.fa.fa-camera').html("modified html")

or, more simply, you could do this:

$('i.fa.fa-camera').html('modified html');

You indicate in a comment to your question that you need to find an element based on a string of HTML that you receive. This is, to put it mildly, difficult, because, essentially, HTML ceases to exist once a browser has parsed it. It gets turned into a DOM structure. It can't just be a string search.

The best you can do is something like this:

var searchEl = jQuery('<i class="fa fa-camera"></i>');
var tagName = searchEl.prop('tagName');
var classes = [].slice.apply(searchEl.prop('classList'));

$(tagName + "." + classes.join('.')).html('modified html');

Note that this will only use the tag name and class names to find the element. If you also want IDs or something else, you'd need to add that along the same lines.

That's a good solution if we have a guarantee there will be always at least one selector, however it will not work when there are no selectors — Faouzi FJTech, Nov 26 '16 at 17:32
@FaouziFJTech What does "when there are no selectors" look like? Can you give an example? — lonesomeday, Nov 26 '16 at 17:38

score 0 · Answer 3 · answered Nov 26 '16 at 17:13

0

You should use Javascript getting the elements by something like

document.getElementById...
document.getElementsByClassName...
document.getElementsByTagName...

Javascript is returning the elements with the Id, Class or Tag Name you chose.

answered Nov 26 '16 at 17:13

DamiToma

921
3
9
27

score 0 · Answer 4 · answered Nov 26 '16 at 17:17

0

You can get en element with document.querySelector('.fa-camera')

with querySelector you can select IDs and Classes

answered Nov 26 '16 at 17:17

umbriel

723
1
7
22

I need to use the full html, using a selector is not an option since there might be cases where I won't have any selectors – Faouzi FJTech Nov 26 '16 at 17:33

score 0 · Answer 5 · edited May 23 '17 at 10:30

0

You can simply refer to it by its class names.

$('.fa.fa-camera').html("modified html");

Similar to this answer https://stackoverflow.com/a/1041352/409556

Here is a full example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.fa.fa-camera').html("modified html");

});

</script>
</head>
<body>
<i class="fa fa-camera"><h1>Some HTML</h1></i>


</body>
</html>`

edited May 23 '17 at 10:30

Community

1
1

answered Nov 26 '16 at 17:17

hayres

120
1
11

I need to use the full html, using a selector is not an option since there might be cases where I won't have any selectors. – Faouzi FJTech Nov 26 '16 at 17:33

score 0 · Answer 6 · answered Nov 26 '16 at 17:41

The one thing that you could use is to check attributes (class and id goes here too in some way) that element have, and the build jQuery selector or DOM querySelector to find the element you need. The hardest part would be to find element based on innerHTML property - "Element" text inside it, for this one you'll probably have to grab all similar element and then search through them.

<span class='hello' data='na'>Element</span>
jQuery('body').find('span.hello[data=\'na\']').html('modified element')

Take notice of 'span' - that's tag selector, '.hello' - class, '[data="na"]' data attribute with name of data.

Jsfiddle link here that extends your example;

Find element in document using HTML DOM

6 Answers6