Develop Reference

using scrollIntoView function to specific HTML tag

I'm using scrollIntoView function to click on a link and have it jump to a different part of my web app. The issue i am having is that i dont know how to target an HTML element called 'identifier'
so my html looks like...
<div class="subpara" identifier="2b">
<num value="b">(B)</num>
<content>some conent</content>
</div>
I want to be able to target the 'identifier' 2b in this case
i tried using:
onClickOutlineNav(id) {
let element = document.getElementById(id);
//scroll to identifier
element.scrollIntoView();
}
and it doesnt seem to be working..any ideas?

You're using incorrect html tag syntax, which would be your first problem.
<div class="subpara" id="2b">
The getElementById function looks for the "id" property on html tags, not the "identifier" property.
If you insist on using the "identifier" property, you can query for it like so:
let element = document.querySelector('[identifier="2b"]');
or more generically:
let element = document.querySelector(`[identifier="${id}"]`);

How can I append some html inside <td> using jquery

I'm trying to add a <hr> element into a <td> in jquery based on the class. I've managed to find the <td> elements I want to append without a problem, but I can't add the html - the <td> already contains some html, I want to append this on the end.
Here is what I'm trying:
<script>
$( document ).ready(function() {
var something = "something";
var element = $('td').filter(':contains(something)').html('<p>Hello</p>');
console.log(element);
});
</script>
Thanks

Instead of using .html() you can use .append() which just added whatever you write into the end of the div.
Like this
$('td').filter(':contains(something)').append('<p>Hello</p>')
This will put hello after filtered <td>
You can also use .prepend() to add things to the begining of the div.

Take a look to this: https://jsfiddle.net/jo2t5yL0/1/
It's working with <td> and .html()
Maybe you forget to include jquery lib?

try appending..something like this... and make sure you're using the jquery library
var element =$('td').filter(':contains(something)').append('<p>Hello</p>');

Find element in document using HTML DOM

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?

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");

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.

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.

You can get en element with document.querySelector('.fa-camera')
with querySelector you can select IDs and Classes

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>`

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;

Use a jQuery Selector as a Variable

I am creating a variable that stores an elements ID in the variable. I could write it like this:
var webappData = document.getElementById('web-app-data');
If I wanted to do the same using jQuery I think I would write it like this:
var webappData = $('#web-app-data');
However, when I try that it doesn't work. (Script throws an error because the variable isn't selecting the div with that Id.)
How would I use jQuery to select an element and store it in a variable?

document.getElementById('web-app-data') isn't the same as $('#web-app-data'). The later returns jQuery object, which is kind of an array of HTMLElement objects (only one in your case).
If you want to get HTMLElement, use $('#web-app-data')[0]. Check:
document.getElementById('web-app-data') === $('#web-app-data')[0]; // true

It's ok.. Maybe something else is wrong in your code..
Example:
<div id="web-app-data">
Hello
</div>
<script type='text/javascript'>
var webappData = $('#web-app-data');
alert(webappData.text()); // Hello
</script>
Fiddle

Above code should work just fine. Your problem might be, that jQuery doesn't find any corresponding elements from the DOM since the element has been removed or hasn't been loaded there yet. If you try to
console.log($('#web-app-data'));
that variable, you can check if jQuery actually found anything. jQuery object should have lenght of (atleast) one if corrensponding element is indeed in DOM atm.

That will work and you use just like it was the full JQuery selector.
var elm = $('#webappData');
if (elm.hasClass('someClass')) elm.removeClass('someClass');
return;

JQuery: How do I get a DID ID?

I have the following HTML:
<div class="house">...</div>
But in my code I dynamically insert in DIV ID's to make the code then look like this:
<div class="house" id="id_1">...</div>
Question: How can I get the DIV ID by only knowing the CLASS using JQuery? I've tried something like the following but it doesn't work.
$('.house').getID();

$('div.house')
.each(function(index) {
alert( 'id for this div.class #'+index+': '+$(this).attr('id') );
});

Use the jQuery.attr() method to get and set attributes.
var houseId = $('.house').attr('id');
Note: This will only get the last '.house' element in the DOM's id.

I believe that
$('.house').attr("id");
Should work. I didn't test it though.