Develop Reference

Why is Inspecting the DOM element showing something diff than using jQuery ID selector in console?

I'm working on displaying a graphic on a website. For some reason, when I inspect the element I see this:
<div id="canvas-daily" style="position:relative;" ng-if="currentMode == 'day'" class="ng-scope"><div class="circle-background"></div></div>
But when I do document.getElementById("canvas-daily") in my console I get a svg graphic inside the parent (canvas-daily) ID div. Why would this be happening and how can I fix/hack into this to append the content that is obviously there?

Edit - this answer has been rendered obsolete by edits the OP made to their question. It has not been deleted yet because of the conversation happening in comments.
To find the DOM element shown in the HTML in your question, you would just use this:
document.getElementById("canvas-daily")
Do NOT include the # in the string you pass to document.getElementById(). That is only used with more generic functions that accept CSS selectors like document.querySelectorAll(). document.getElementById() just takes a plain string that matches the ID you are looking for.

Can jQuery manipulate HTML that is not on the DOM?

For example:
I have the following HTML on the DOM:
<div id="hey"><h1>Trollin</h1></div>t
If this content was on the DOM, I could simply do:
$("#hey h1").text("Hello!");
But what if the HTML was stored in a JavaScript string called "myString"? Is it possible to change the text when it is not on the DOM using jQuery or must I append it, edit it and then remove it?
If it is not possible to edit the HTML using jQuery whilst the HTML is in the variable, what is my best option?

$(myString) would convert the string of HTML (must start with a < character) to a jQuery-wrapped DOM fragment, which you can use all of jQuery's object methods on for manipulation.

.parseHTML() seems like what you're looking for. See the http://api.jquery.com/jquery.parsehtml/.

Get a jQuery element for a DOMElement

I know how to do the opposite. Getting a certain DOMElement for a jQuery element is easy. (Use the get() method)
But how can you get a jQuery element for a specific DOMElement?
Unfortunately this DOMElement does not have any attributes like class or id so constructing a selector is not really an option.
Lets say I have this html:
<div class="edit">Abcd<b><i><u>asdasd</u>adasda</i></b>sdfsdf<br>asd</div>
I am in the u-DomElement. How can I get this as a jQuery element?
Is there a smart way to do this?
EDIT:
I wanted to know if there is a gerneral way to do this. Not specific to the code shown above.
Like:
DomElement.toJQuery()
Is there anything like that? I am aware that this might not be possible.

Getting a jQuery object for a DOM object is as simple as jQuery(dom_node) (or $(dom_node)). See http://api.jquery.com/jQuery/
This is commonly used in event handlers, which are given the DOM node as this, so that you will often see $(this)

If you want to get just the Element use the below code. if you wanted to get the HTML of any element you might want to add the .html() tag to either of the examples
var myVar = $('.edit u');
or
var myVar = $(".edit").find("u");

Are you looking for this?
$(".edit").find("u");
hope this is what you are looking for,
$(DomElement)

you want a only 1 specific dom element i suggest you find a way to add an id to that element.
but to get an u element inside a edit class:
$('.edit u');
$('.edit').find('u');

How to insert created object into a div

I created an iframe using jQuery that I want to insert into an existing div element. However, when I use innerHTML to insert it, it shows up as: "[object HTMLIFrameElement]"
What could be the reason for this?
Here is the example: http://jsfiddle.net/MarkKramer/PYX5s/2/

You want to use the appendChild method rather than innerHTML. Change the last line in the JSFiddle from
iframediv.innerHTML = iframe;
to
iframediv.appendChild(iframe);
Edit to actually answer your question:
Your variable iframe is a reference to a DOM element. It's object representation is an <iframe> element while its textual representation is simply [object HTMLIFrameElement].
By using innerHTML you are attempting to insert its textual representation into the DOM. This is just how the method works. You may come across JS code where elements are added to the DOM via innerHTML, but it's always with text, e.g.
element.innerHTML = '<div>some text</div>';
In this case the browser will correctly add a <div> node as a child of element.
For your <iframe> element to be inserted into the DOM using the variable iframe, you must use the appendChild method which will add the IFrame object as a child node to iframediv.

$('#iframecontainer').append(iframe);
instead of
var iframediv = document.getElementById('iframecontainer');
iframediv.innerHTML = iframe;
should fix the problem

var new_iframe = $("<iframe></iframe>");
new_iframe.appendTo($("#div_to_insert_into"));

The idea behind (most) of the posted solutions is that you can work with your iframe and it's container as jQuery objects instead of regular dom elements. A jQuery object is a reference to a div or an iframe that has access to all of jQuery's awesome methods... like .append() and .click().
Generally speaking, jQuery's real purpose is to turn lines of code like
var iframediv = document.getElementById('iframecontainer');
...into ...
var iframediv = $("#iframecontainer");
...which you can then use to do with whatever you please, like
iframediv.appendTo("#anotherDiv");
Good luck.

jquery changing innerhtml of a P isn't working

I have what I thought was a simple select with jQuery to change some text on a paragraph. It works perfect the traditional way i.e.
document.getElementById('message_text').innerHTML = "hello";
But with jQuery it doesn't. I have checked the values of $('#message_text') and sure enough I see the items.
$('#message_text').innerHTML = "hello";
Am I doing something wrong?
Anyone have any ideas?

When you do something like $('#message_text') what you have there is not a regular DOM object, but a jQuery wrapped set (even though in this case it'd only be one element.) If you wanted to access a particular DOM property, you could do this:
$('#message_text')[0].innerHTML = 'whatever';
$('#message_text').get(0).innerHTML = 'whatever';
However, this isn't necessary in this case as jQuery has two functions to do what you want:
html():
$('#message_text').html('whatever');
text():
$('#message_text').text('whatever');
The difference between the two is that html() will allow HTML while text() will escape any HTML tags you pass to it. Use the one you need over manually manipulating the HTML with innerHTML.

The jQuery function $() is not returning a HTMLElement object like getElementById() does but a jQuery object. And there you just have the html() method as equivalent to innerHTML. So:
$('#message_text').html('hello');

$('#message_text').html('hello')
jQuery selector returns an array, not a DOM Element node.