We Keep Coding

Javascript: How to print input to <div> selected by class?

Edit: Thanks for the helpful answers so far! I'm still struggling to print the input to the "right" div, though. What am I missing?
Next to the input field, there is an option to select either "left" or "right". Depending on the selection, the input is to be printed eiether left or right on the click of a button. This is what I have - but it only prints to the left, no matter the selection.
jQuery(document).ready(function(){
$('.button').click(function(){
$('.input').val();
if ($('select').val() == "left"){
$('div.left').html($('.input').val());
}
else {
$('div.right').html($('.input').val());
}
});
});
</script>
Sorry if this is very basic - I am completely new to JS and jQuery.
I'm trying to print input from a form into a div. This is part of the source HTML modify (it's for a university class):
<input type="text" class="input">
<div class="left">
</div>
<div class="right">
</div>
Basically, text is entered into the field, and I need to print this text either to the "left" or the "right" div when a button is clicked.
So far, I have only ever dealt with divs that had IDs, so I used
document.getElementById("divId").innerHTML = ($('.input').val());
But what do I do now when I don't have an ID? Unfortunately, changes to the HTML source are not an option.
Thanks in advance!

Just use normal selectors, like css and jQuery does.
https://api.jquery.com/category/selectors/
in your case:
$('div.left').html($('.input').val());

As you see there are many ways to do this. You can get elements by tag name, class, id...
But the most powerful way is to get it with querySelector
function save() {
var input = document.querySelector('input').value;
document.querySelector('div.left').innerHTML = input;
}
<input type="text" class="input">
<button onclick="save()">Save</button>
<div class="left"></div>
<div class="right"></div>

There are plenty of other ways to target HTML elements, but the one you're looking for in this case is getElementsByTagName(). Note that this returns a NodeList collection of elements, so you'll additionally need to specify the index that you wish to target (starting at 0). For example, if you want to target the second <div> element, you can use document.getElementsByTagName("div")[1].
This can be seen in the following example:
let input = document.getElementsByTagName("input")[0];
let button = document.getElementsByTagName("button")[0];
let div2 = document.getElementsByTagName("div")[1];
button.addEventListener("click", function(){
div2.innerHTML = input.value;
});
<input type="text">
<button>Output</button>
<br /><br />
<div>Output:</div>
<div></div>

Since you have unique class names for each element, document.getElementsByClassName can be used. This will return an array of elements containing the class. Since you only have one element with each class name, the first element of the returned array will be your target.
<input type="text" class="input">
<button onclick="save()">Save</button>
<div class="left"></div>
<div class="right"></div>
<script>
function save() {
var input = document.getElementsByClassName('input')[0].value;
document.getElementsByClassName('left')[0].innerHTML = input;
}
</script>

This is one of the many ways to do what you want:-
Write the following in console:
document.getElementsByTagName("div");
now you can see the total number of div elements used in your current document/page.
You can select one of your choice to work on by using "index number"(as in array index) for that particular div.
Lets say your div having class name = "right" is the 3rd one among the other div elements in your document.
This will be used to access that div element.
document.getElementsByTagName("right")[2].innerHTML = "whatever you want to write";

Cannot manage to change the inner html of a div element

I cannot manage to change the inner html of a div element
<div class="emoji-wysiwyg-editor form-control" data-id="83fa07d0-2bab-4c02-8bb6-a2133ae64bbd"
data-type="input" placeholder="Chat Message" contenteditable="true" id="chatMessageSurrogate"
data-toggle="tooltip" data-placement="top" data-title="Please input a message within 300
characters." autocomplete="off" style="height: 63px;">wafwafgz</div>
I've tried the following:
$(".emoji-wysiwyg-editor.form-control").val("Hello!")
document.getElementsByClassName(".emoji-wysiwyg-editor.form-control").innerHTML = "Hello!"
but none of them is working

$(".emoji-wysiwyg-editor.form-control").html("Hello!"); should work

as stated previously .html("hello") should work, but also, getElementsByClassName i believe only works on a single class name and returns and array, so the below should also work
$(".emoji-wysiwyg-editor.form-control").html("Hello!");
// or
document.getElementsByClassName("emoji-wysiwyg-editor")[0].innerHTML = "Hello!"

In your HTML code there are two different class "emoji-wysiwyg-editor" and "form-control". So you have to use any of one.
$(".emoji-wysiwyg-editor").html("Hello!");
$(".emoji-wysiwyg-editor .form-control").html("Hello!");
And you want to add html contents in DIV so you have to use html. val is use for input typt.

in pure JavaScript with the use of multiple class.
document.getElementsByClassName("emoji-wysiwyg-editor form-control")[0].innerHTML = "hello";

Using JS,
var a = document.querySelector('.emoji-wysiwyg-editor');
a.innerHTML = "Hello";

How to obtain the text content between two anchor tags [duplicate]

This question already has answers here:
Jquery change text between two elements
(9 answers)
Closed 9 years ago.
I have a html content as shown below.Is there any way to obtain using Jquery the text in between the two anchor tags without wrapping any div or span tags around the text named "user1" .I need the output as "user1". Could someone please help me.
<div class="test 1">
<input id="field1" type="hidden" value="terminal">
<a class="Prev" title="prevoius" href="#">previous</a>
User1
<a class="btnNext" title="next" href="#">next</a>
</div>

Something like this should work:
var theText = $('.Prev')[0].nextSibling.textContent || $('.Prev')[0].nextSibling.innerText;
Here's a fiddle

Following code would give you the desired text.
var ch1 = $("a[class=Prev]");
var ch2 = $("a[class=btnNext]");
var contents = ch1.parent().contents();
contents.slice(contents.index(ch1) + 1, contents.index(ch2)).text();

Try this: http://api.jquery.com/contents/
contents returns the "children of each element in the set of matched elements, including text and comment nodes". It should return four children: input, a, text, a.

You can do it with nextUntil.
http://api.jquery.com/nextUntil/

Removing the div child in jquery [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Replace Div with another Div
<div id='test'>
<span></span>
<p></p>
<button></button>
<h1></h1>
</div>
My question is , how we can remove the button element and insert someother on the same position in jquery?

Use this:
$('#test button').replaceWith('<span>new</span>')

$('#test button:first').replaceWith('<span>new</span>')

you can usereplaceWith() method:
$('#test button').replaceWith('<p>another element</p>')

You can use the .replaceWith() method to accomplish this. For more.

Solution
$('#test').find('button').replaceWith('<input type="text"/>');
alert($('#test').html());

Get value of class of a DIV using JavaScript

Question is simple. Not using jQuery... how do I get the value of class value in a DIV using regular JavaScript?
Thanks.

Assuming this HTML
<div id="Target" class="MyClass" />
Like This
var ElementCssClass = document.getElementById("Target").className;

get a reference to the div and use .className
document.getElementById('someDiv').className