We Keep Coding

jQuery removes wrapping element

I am loading a html file with jquery $.get and wrap the response. But jQuery removes my wrapper .
I made the following example which demonstrates my problem:
https://jsfiddle.net/pwm76bp6/
Everyone who dont want to open the link here is the example code:
alert($('<div><div>Hallo</div></div>').html());
I would expect that the whole string should be alerted. Whats the problem here?

You need to read outerHTML property.
console.log($('<div><div>Hallo</div></div>').prop('outerHTML'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Dynamically wrap it with an element, then get the html() of the wrapped element.
alert($('<div><div>Hallo</div></div>').wrap("<div></div>").parent().html());

It doesn't remove your wrapper. jQuery html() does return the contents of an element.
When you do $('<div>my content</div>') you creating an element, then you get the inner html with html() which is then alerted in your example.

With your code you will get the html of your outer element <div>. And the content of the outer <div> is <div>Hallo</div>.
You can do what you want with a default property:
alert($('<div><div>Hallo</div></div>')[0].outerHTML);

the function "html" does return the html content of a given element. In your case "html()" returns the content of the outer div, which excludes the outer itself.
You may can overcome this by wrapping your html like:
var html = '<div><div>Hallo</div></div>';
var outerHtml = $(html).wrap('<div />').parent().html();
hope this helps.

JQuery appendTo() to html() to allow replace

I have the following
$('.toggle_questions').appendTo('#'+sectionId).show();
Which works perfectly to append my div (.toggle_questions). However, I want it to replace rather than add each time.
From my understanding this is done through html() rather than appendTo() ? I have only found examples adding simple <p> codes and not actual <div> 's
I have changed it to this but it won't seem to do anything:
$('#'+sectionId).show().html($('.toggle_questions')).show();
The show() is needed as it is set to hidden to start with.
Where have I gone wrong? Thanks!

I would save the content of $('.toggle_questions') on every occurrence and apply it like this:
var content = $('.toggle_questions').html();
$('#' + sectionId).html(content).show()
It's a much cleaner code and easier to maintain.

Try to pass html string in to .html(),
$('#'+sectionId).html($('.toggle_questions').html()).show();
.html() wont accept jquery object as its parameter.
But appendTo() will move the original object. If you want to do the same thing using .html(), then you have to remove it manually after setting the html string.

get .html() of {{#each}}

I have a $('.textarea').val() that gets the value of said textarea upon submission, inserts it into a Mongo.Collection and then displays it through {{#each}}{{/each}} in the body.
Before the text is inserted into the collection and then returned & published again, I have a regex set up to replace all image links with <img src='said link'>
My issue is that .val() does not work with tags, only .html and .text does, which I cannot use to get the value of a textarea. Is there any clever way of going about this (replacing .val() with .html()? Perhaps a listener on the body to replace all links with the tag after the text has already been submitted, in which case, how would I go about setting it up to listen for all text change?
EDIT:
To be more precise, is there a way to perform
$('.messages').html($('.messages).html().replace(this, 'that'))
on values that are constantly changing and output by {{#each}}
after returned from a collection? Is there a way to refer to each of the messages rather than whole?

If I understand correctly you are trying to replace all the sources in a text with images. This should help you:
http://forum.jquery.com/topic/replacing-text-links-with-images
Also, read this part of the jquery documentation:
http://api.jquery.com/attr/
I think that you are on the right track: changing the .html() should work.

innerHTML not working javascript

I have already found some question of this genre but the answer didn't help.
Javascript - div content without innerHTML
Javascript: Does not change the div innerHTML
I have a div called adx-title by id and i have to change the content. So i made my ajax call and i stored (i use jQuery) in a call the title i want this div to contain:
$('#adx-title').inneHTML = title;
Firebug report this ($('#adx-title').inneHTML) as undefined, and it does report so in every attempt i make to change the content of the div, which is read as an object but it doesn't have the innerHTML property. The script is loaded after i click a button so it should recognize the div as already loaded by the page. And indeed it gets the div with $('#adx-title'). it just doesn't apply the change and reports innerHTML as undefined.
Anyone has had a similar issue? Anyone can help? Thanks Agnese

You're using jQuery.
$('#adx-title').html( title );
The .innerHTML property is part of the DOM API. When you make a call to jQuery (as you're doing with the $) the result is a jQuery object, not a DOM element.
You can get the DOM element from the jQuery object like this:
var elem = $('#adx-title').get(0);
However, the jQuery .html() API wraps access to the .innerHTML property and also provides some other useful bookkeeping features. If you're using jQuery in general to manipulate the DOM, it's a good idea to use .html() and not the raw DOM API for that reason.

Try $('#adx-title').html(title);

Find <style> tag by class not working

I'm using AJAX to fetch some HTML markup. I want to append some style tags (with a class) from the fetched markup to my own document using find(). However, jQuery does not seem to like the following approach.
(link removed due to lack of reputation)
Could someone shed some light on why this does not work, and point me in the right direction?
Thank you in advance.
Solutions
Making it a native element first (and removing script tags as extra precaution) works. http://jsfiddle.net/T6QCR/5/
Also, a lot simpler, using innerHTML instead of .html() works, as setting innerHTML does not evaluate scripts and allows .find() to function. http://jsfiddle.net/T6QCR/8/
Also, laconbass' answer below.
Thank you for the help!

Parse the HTML chunk rather than just passing it to jQuery
From the jQuery function documentation for the case you are using:
(...) if the string appears to be an HTML snippet, jQuery attempts to
create new DOM elements as described by the HTML. Then a jQuery object
is created and returned that refers to these elements. You can perform
any of the usual jQuery methods on this object.
(...)
If the HTML is more complex than a single tag without attributes, as
it is in the above example, the actual creation of the elements is
handled by the browser's innerHTML mechanism. In most cases, jQuery
creates a new element and sets the innerHTML property of the
element to the HTML snippet that was passed in.
(...)
When passing in complex HTML, some browsers may not generate a DOM
that exactly replicates the HTML source provided. As mentioned, jQuery
uses the browser"s .innerHTML property to parse the passed HTML and
insert it into the current document. During this process, some
browsers filter out certain elements such as , , or
elements. As a result, the elements inserted may not be
representative of the original string passed.
The documentation recomends ussing $.parseHtml()
For explicit parsing of a string to HTML, use the $.parseHTML()
method.
$.filter rather than $.find
As you noted, $.find does not work on this example. I had succeed replacing it with a $.filter call.
// this works
$html.filter('.test');
// this doesn't works
$html.find('.test');
// better if you filter also by tag
// surely you will have more tags other than <style> on the retrieved html
$html.filter('style.test');
See how this applies to your example on this fiddle.

body is not defined, the console gives an indication of this by way of an error, too. If you want to use jQuery to select the markup body and append the style then you will need to use an appropriate selector:
$("body").append($style);

<style> element can't has class attribute, because Uncaught SyntaxError: Unexpected identifier.
This code shoud work:
var html = '<html><head><style>aaa</style></head></html>';
var $html = $.parseHTML(html);
$.each($html, function(i, el) {
if(el.nodeName == "STYLE") {
$("head").append(el.outerHTML);
return false;
}
});

I'm not really sure as to why this is, but it has something to do with the document model and how it works. You can't just hold a temporary var with the html text in it, you need to put it all inside an element (like a div) that is attached to the document in some way. This div could be hidden from view from the user.
<html>
<head>
<div></div>
</head>
<body>
<script>
jQuery(document).ready(function($) {
$('div').hide().html('<html><head><style class="test"></style></head></html>'); // From AJAX request
var $style = $('div').find('.test');
document.body.appendChild($style[0]);
});
</script>
</body>
</html>