We Keep Coding

Why can't I insertAdjecentHTML into a textarea?

I can't successfully use
document.querySelector('textarea').insertAdjacentHTML('beforeend', '<span style="color:red">Danger</span>')
<textarea>TEXT</textarea>
in my code. Chrome inserts the text escaped, FF doesn't show the node. Is there any documentation about this behavior?
Update: Beside the type on the function name it doesn't work (which is expected) because <textarea> only supports text content as specified in the HTML5 Standard (see "Content model: Text").
The method insertAdjacentHTML is inherited from HTMLElement -> Element.
Sidenote: Chrome and Firefox behave different if your first create an element and then append it (append but don't show) instead of showing the html as text.

The child nodes of a textarea:
Can only be text nodes. Element descendants are forbidden.
Represent the default value of the textarea, not the current value. Manipulating it is not guaranteed to update the current value.
If you want to change the value of a textarea, use the value property.
document.querySelector('textarea').value += '<span style="color:red">Danger</span>';
If you want a formatted and editable control, then don't use a textarea. See making content editable.

Jquery - extracting and modifying text from an element

I have some elements in my document like:
<div class="checkbox-inline"><label><input id="mylabel" value="False" type="checkbox">mytext</label></div>
When I try to get the text using:
$("#mylabel").text();
I get an error that text() is not defined on that object. My ids are unique, so my object is in the 0: position in $("#mylabel") but both of these return an empty string for the text:
$("#mylabel").first().text();
$("#mylabel")[0].text();
How can I get the text mytext out of these elements? And how can I programmatically modify it?
I realize now that my problem is slightly different than what I thought it was. Please see: Modifying the text of a label that also contains an input (checkbox) for my follow-up question. Thanks!

The value of an input element is not given by text(), but by val().
If you want to get the label text:
$("#mylabel").parent().text()
It is a bit confusing that you give the id mylabel to an input element, which is not the label element.

I'm assuming you're trying to access the text of the label element, in this case "mytext"? The reason this isn't working is because the id is on the input element, whcih doesn't actually contain that text
<input id="mylabel" value="False" type="checkbox">
That's the entirety of your input element.
As others have stated, you can get the value of that element using
$("#mylabel").val()
Which will give you "False"
However, if you do need the text "mytext" and don't want to change your markup you can use this
$("#mylabel").parent().text()
Which gets the element with the mylabel id, finds it's parent element (in this case the label element) and then gets the text from that element.
Now that you know that, you might realise that it's easier to just put an id on the label!

If you want the label text.. then you want to use
$('.checkbox-inline label').text();
You're targeting the checkbox itself, not its' label.

Its $("#mylabel").html() to get the inner html of tag.
EDIT:
For your particular case it can be:
$("#mylabel").parent().text();

jQuery change text in button

I need to change the text in a button but it's not working. This is what I've come up with thus far:
var newElemen = $(<button text='Text changed..'></button>);
document.append$(newElemen);
I've also prepared a jsFiddle example.

Don't spend too many horses on this.
You need to first look at how jQuery's selector works. It works similar to CSS selectors (if you're not familiar with that I suggest you start with something more basic).
If you need a quick review on jQuery syntax. In your example you need to use the element selector $('button') and then you'll want to apply the .text() function to change the text for the button. So if you put it together. You'll want to select the button and then apply the text() function, passing in the string you want to change the text to, to change it's text.
$('button').text('Insert Text Here');

Use .text method using button selector
$("button").text('Text changed..');

$('button').text('new text');
fiddle: http://jsfiddle.net/zLf3k/3/
jQuery selector must be String
created new DOM element when you use html element on jQuery selector
use $(document).append instead of document.append$

$('button').text('some text');

jQuery - how to detect if clipboard content has changed?

Is there a way to detect, if clipboard content has changed? I want to detect if a part of the text that is copied and pasted originally comes from the focused/active paragraph element. The paragraph element is set to contenteditable="true".
HTML
<p class="parent" contenteditable="true">
Text that is first cut and then pasted
</p>

First thing that is not a clipboard. Second thing you can always compare the value to the initial value on a keyup event. Some of the code would be like this:
$('p').keyup(function () {
$(this).text() // or $(this).html();
}
Now, either use the value as a variable and compare it to the initial value, but always remember, you cannot run .val() on a paragraph element. That won't do the job for you. You either need to get all the HTML elements or the text of the element.
To capture the paste/copy event. You can try this code:
$('p').bind('paste', function () {
/* code here */
}
This would capture the paste event.

document.getElementByClassId("parentId").addEventListener("input", function() {
alert("Content changed");
}, false);
FIDDLE

You can. On input compare the text with the original text. If it comes from for example database, make an ajax compare. If it doesn't, create a hidden field with the original content and compare text() of .parent with value of the input[type=hidden]. If you want a snippet, just ask. But I think it is clear enough.

Equivalent of selectionStart, selectionEnd, and focus() for contenteditable spans and divs

I am trying to set a contenteditable span so that it will on the onkeyup event refill the span with formatted text.
However, when I try this the cursor disappears and I can't type anymore. This is because the formatting program, instead of modifying the text already in the span, erases it all and then writes the formatted text in its place.
It is important (I think it is) to note that the element does not appear to be losing focus. Also, because I would like for this project to remain fairly "secret" until it's release, I would rather not give away the source code right now.

This is probably due to you using the innerHTML to set the formatted text.
Instead use childNodes collection to access the content and replace textNodes with formatted html element. This avoids setting innerHTML and avoids loosing focus.