0

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?

Improve this question
13
  • Please try this: jQuery("body").find(el).html("modified html");
    – Mihai Alexandru-Ionut
    Commented Nov 26, 2016 at 17:11
  • So what's wrong with using any relevant selector, e.g: $('i.fa.fa-camera').html("modified html");???
    – A. Wolff
    Commented Nov 26, 2016 at 17:15
  • @Alexandru-IonutMihai I tried body also but with the same result
    – Faouzi FJTech
    Commented Nov 26, 2016 at 17:16
  • Do you include jquery script ?
    – Mihai Alexandru-Ionut
    Commented Nov 26, 2016 at 17:17
  • @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
    Commented Nov 26, 2016 at 17:17

6 Answers 6

Reset to default
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");
Improve this answer
2
  • That's the only solution that worked, thanks a ton !
    – Faouzi FJTech
    Commented Nov 26, 2016 at 17:34
  • 1
    This is both clever and a little bit horrible. +1
    – lonesomeday
    Commented Nov 26, 2016 at 17:39
1 
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.

Improve this answer
3
  • 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
    Commented Nov 26, 2016 at 17:32
  • @FaouziFJTech What does "when there are no selectors" look like? Can you give an example?
    – lonesomeday
    Commented Nov 26, 2016 at 17:38
  • yep for example, <span>this is an example</span>
    – Faouzi FJTech
    Commented Nov 26, 2016 at 17:42
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.

Improve this answer
0

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

with querySelector you can select IDs and Classes

Improve this answer
1
  • 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
    Commented Nov 26, 2016 at 17:33
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>`
Improve this answer
1
  • 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
    Commented Nov 26, 2016 at 17:33
0

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;

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.