Develop Reference

How should this change to the inner html respond?

I am trying to change the text of a paragraph tag with a button, and I wanted to test how different styling tags would affect that change. My html looks like this:
<p id="testParagraph"> This <strong> is </strong> a test </p>
<button id="button">Run Test</button>
In my js file, I'm grabbing that tag by its id, and trying to set its inner html like this:
var button = document.getElementById("button");
button.onclick = function() {
document.getElementById("testParagraph").innerHtml = "I changed the inner html, but what do I look like?";
}
I'm not seeing any change when I click the button, and I was wondering if this was caused by something I did incorrectly, or if there's a problem with changing the html like because of the strong tag in the original paragraph tag.

it is innerHTML not innerHtml
var button = document.getElementById("button");
button.onclick = function() {
document.getElementById("testParagraph").innerHTML = "I changed the inner html, but what do I look like?";
}
Demo: http://jsfiddle.net/shseqy0t/

It's .innerHTML, not .innerHtml. Casing is important in JavaScript.
Not much more to say. A simple typo - carry on!
Edit:
Since we have two identical answers though, I thought I'd give an alternative solution to the script.
You can use addEventListener, with a benefit being that you can attach several events to the same element (opposed to a direct onclick). This is not a recommendation, just mentioning that it's an alternative. Use whatever you prefer.
document.getElementById("button").addEventListener('click', function() {
document.getElementById("testParagraph").innerHTML = "I changed the inner html, but what do I look like?";
});
<p id="testParagraph"> This <strong> is </strong> a test </p>
<button id="button">Run Test</button>

Textarea name change without refreshing

well, i have TEXTAREA in a form.
<textarea name="content_en"></textarea>
and also i have three buttons near this textarea:
<button class="button_en>EN</button>
<button class="button_ro>RO</button>
<button class="button_ru>RU</button>
i want to do this:
to change textarea name when i press a button without page refreshing or something like that.
so this is to put different content in different columns from a row from database. (Content in different languages under same ID)

You can do this:
Change the class of the buttons and move atual class to other param like 'data-txt':
<button class="button-change-txt" data-txt="en">EN</button>
<button class="button-change-txt" data-txt="ro">RO</button>
<button class="button-change-txt" data-txt="ru">RU</button>
Then, add a class to textarea:
<textarea class="txt-content" name="content_en"></textarea>
So, add an event to ".button-change-txt" class:
$('.button-change-txt').click(function(){
var txt = $(this).attr('data-txt'); //STORE THE data-txt INTO A VARIABLE
$('.txt-content').attr('name','content_'+txt); //CHANGE THE TEXTAREA NAME
})

Some would recommend using the "on" method instead of the "click" method, seeing as the .click() method simply points to .on('click'), thus:
$('.button-change-txt').on('click', function(){
var txt = $(this).attr('data-txt');
$('.txt-content').attr(name,'content_'+txt);
});

Make a DIV act as an INPUT field

I am currently using a bunch of input textfields and I want to change it to a DIV, but most of my JS functions use document.getElementById("inputField1").value whenever the value of the input field is set like this:
<input contenteditable="false" id="inputField1" type="text" size="12" style="background:#09F;color:#FFF;text-align:center" value="Hello World!"/>
That would return just Hello World! if I were to display the value in an alert
How would I get the value of the text in between if I were to use DIVs?
For example <div id="inField001">Hello World</div>
Thanks!

In that case you can use:
document.getElementById('inField001').innerHTML
Or:
document.getElementById('inField001').innerText
Or:
document.getElementById('inField001').textContent
Also (if you want to use jQuery):
$('#inField001').text()

You would just do
var value = document.getElementById('inField001').innerHTML);
But if your DIV has some html this will grab that too.
.innerHTML
You can also use document.getElementById('inField001').textContent) to grab just the text nodes from the element ignoring any element wrappers.
But support for textContent is not as good as innerHTML.
See doc for info and support.
Another way is using innerText. alert(document.getElementById('inField001').innerText); but not supported in FF.
See Doc for support.
Fiddle

Use the innerHTML property.
document.getElementById("inField001").innerHTML
BTW this kind of thing is way better to do with jQuery.

For just text content:
var value = document.getElementById('inputField1').textContent;
For the more verbose version, see here.

or just do
x = document.getElementById("inField001");
alert(x);

Changing data-content of a button class used in popover

I have a button class which I am using for twitter popover, my code is as follow:
<button class="btn btn-success" id="chaticon" data-original-title="Users Online" data-content="<a href='#'> OMGTEST </a>">
And what I want to do is to modify the data-content via javascript,
Naively I tried to do:
document.getElementById("chaticon").data-content = "new content";
and it didn't work, any ideas on how I can do this?

Use the built in accessors for HTMLElement.
getAttribute(attributeName)
setAttribute(attributeName,newValue);
like this:
var yourElement = document.getElementById("chaticon");
var dataVal = yourElement.getAttribute("data-content");
var newData = "new data";
yourElement.setAttribute("data-content",newData);
here is a simple demo: http://jsfiddle.net/hpfk3/
edit
You should probably have included jquery and popover in the question instead of just asking about a button element. Since these are available, you can change the content like this:
//store chat icon jQuery object
var chatIcon = $("#chaticon");
//change data attribute on element
//change jquery data object content
//call setcontent method
chatIcon.attr("data-content","new data").data('popover').setContent();
//target the popover element and restore its placement definition
chatIcon.data('popover').$tip.addClass(chatIcon.data('popover').options.placement);

Try setting the attribute
document.getElementById("chaticon").setAttribute('data-content','new content');

Insert HTML as a String, without JQuery

I'm looking for a method to insert a string, which contains HTML data, into a div element.
The string is loaded via XHR, and there is no way of knowing what elements and such are in it.
I've searched around for a bit, and found some things that might help, but wouldn't completely work for me. What I need is something similar to the update() function from the Prototype framework:
http://prototypejs.org/api/element/update
The platform I'm writing for does not allow frameworks to be used, or JQuery. I'm stuck with Javascript. Anyone have any ideas?
I can't use innerHTML, as it does not apply any updates or functions or basically anything that's supposed to occur on load
I have some onload events that need to occur, and as best I know, using innerHTML does not execute onload events. Am I incorrect?
EDIT 2 years later:
For anyone else reading, I had some serious misconceptions about the onload event. I expected that it was a valid event for any element, while it is only valid for the <body/> element. .innerHTML is the proper method to do what I was looking for, and any extra functionality for the elements added, needs to be done manually some other way.

HTMLElement innerHTML Property
The innerHTML property sets or returns the inner HTML of an element.
HTMLElementObject.innerHTML=text
Example: http://jsfiddle.net/xs4Yq/

You can do it in two ways:
var insertText = document.createTextNode(theText);
document.getElementById("#myid").appendChild(insertText);
or
object.innerHTML=text

I'm looking for a method to insert a string, which contains HTML data, into a div element.
What you want to use is the innerHTML property.
Example of use:
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = '<p>Universe</p>';
}
</script>
<p>Hello <b id='boldStuff'>World</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>

do you mean like this? : http://jsfiddle.net/FgwWk/1 or do you have things in the div already before adding more?

Plain JS.
Just use: element.insertAdjacentHTML(position, text);
position = "beforebegin" | "afterbegin" | "beforeend" | "afterend"
var text = '<a class="btn btn-blue btn-floating waves-effect">\n' +
'<i class="fas fa-user"><span class="badge badge-danger"></span></i>\n' +
'</a>';
var inputPlace = document.getElementById("input-pace");
inputPlace.insertAdjacentHTML("beforeend", text);