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";

Fetch a div via jQuery in SharePoint site

In a sharepoint site I have the following div that I need to call it. Problem is in SP sites the id is dynamic and it is bad idea to use, but I don't know any other way to call the div?
Any suggestion?
<span dir="none">
<div class='ms-rtestate-field ms-rtefield' style=''>
<div id='_ctl00_TextField_inplacerte_label' style='display:none'>Rich text
editor no & (Title)</div>
<div class=' ms-rtestate-write ms-rteflags-0'
id='_ctl00_TextField_inplacerte' style='min-height:42px' aria-
labelledby='_TextField_inplacerte_label' contentEditable='true' >
<div class="ms-rtestate-field"> no & (Title) field value.
</div>
</div>
<div style="clear:both;"></div></div>
<span dir="ltr">

Try with below line.You can get same also from class name
var divId = $('.ms-rtestate-write').attr('id');
console.log(divId);
Now you can do whatever you want with this Id or you can do same manipulation from class also.
let me know if it solve your problem.If you have multiple parrallel div with this div then let me know i will share it.

One way I used long time back -
$(window).load(function(){
var getDivFromitsPositioninLayout = $(".parent-div-class div:(n)th-child")
})
Got hold of the div based on the layout, but not sure if that fits in your criteria.

Select a specific element from HTML data in a variable

I have stored the results of $.get() into a variable called questionsdata. The data is basically a bunch of divs with unique ids. I wish to find just one div using an id. I can kind of understand that this wouldn't work but I don't know what would.
$(questionsdata).find("#593");
Example data in the variable:
<div id="591">Stuff</div>
<div id="592">Stuff</div>
<div id="593">Stuff</div>
<div id="594">Stuff</div>

You can parse HTML stored in a text variable with jquery quite easily - it doesn't need to be added to the DOM.
As #593 is at the top level, .find will not find as it searches children. Instead you could use .filter if it will always be at the top level, or wrap in another <div> - either at the source or via jquery:
var data = '<div id="591">Stuff1</div><div id="592">Stuff2</div><div id="593">Stuff3</div><div id="594">Stuff4</div>';
console.log($(data).find("#593").length)
// Use .filter
console.log($(data).filter("#593").text())
// Or wrap with a div
console.log($("<div>").html(data).find("#593").text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

var questionsdata = '<div id="x"><div id="a591">Stuff1</div><div id="b592">Stuff2</div><div id="c593">Stuff3</div><div id="d594">Stuff4</div></div>'
console.log($('#b592',questionsdata ).html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Your JavaScript
var data='<div id=591>Stuff</div>
<div id="592">Stuff</div>
<div id="593">Stuff</div>
<div id="594">Stuff</div>';
var $data = $(data).appendTo('#container");
var my_div=$("#container").find("#593");
Your HTML
< div id="container"></div>
Your CSS
#container{display:none;}

How to change name and id of element using jQuery?

I'm new at jQuery. I'm cloning one specific HTML block and trying to change last cloned html's element's nameor id, class but i couldn't. I can find and alert name of element that i want to change, but i can not change it. Hope you can help me.. thanks in advance.
My code
jQuery(document).on("click",".smclass",function(){
var html = jQuery(this).closest(".entry-edit").clone().appendTo(".main-col-inner").html();
html = jQuery(html).find('.start').attr('name','optional[2][type]').attr('id', 'Type1');
}
HTML
<div class="entry-edit">
<!-- html codes -->
<button id="Addfield" title="Field Ekle" type="button" class="smclass" onclick="" style="float: right;"><span><span><span>Field Ekle</span></span></span></button>
<!-- html codes -->
<select id="Type" name="optional[1][type]" class="start">
<option value="0">Date</option>
<option value="1">Text</option>
<option value="2">Select</option>
</select>
<!-- html codes -->
</div>

Your code is just putting an html string into a variable and then creating a new jQuery object with said html. You are not selecting the new element and changing it
//Just remove the .html() call and you will have the cloned element
var ele = jQuery(this).closest(".entry-edit").clone().appendTo(".main-col-inner");
ele.find('.start').attr('name','optional[2][type]').attr('id', 'Type1');
You also do not need to make multiple .attr calls, you can pass it an object with the name value pairs you want to set
ele.find(".start").attr({
"name":"optional[2][type]",
"id":"Type1"
});

just try vise versa
var clonedObject = jQuery(this).closest(".entry-edit").clone();
clonedObject .find('.start').attr('name','optional[2][type]').attr('id', 'Type1');
clonedObject.appendTo(".main-col-inner").html();

Regular expression to change Ingredient 1 TO "Ingredient" + counter

I am trying to change just the label tag when I clone the div. The current piece of JS changes the product name within the drop down list.
var clone = $('#product-1').clone(false)[0].outerHTML.replace(/1/g, counter);
<div class="activeingredients">
<div class="products" id="product-1">
<label>Active Ingredient 1</label>
<ul>
<li style="display:inline-block">
<select name="productid">
<option>Product 1</option>
</select>
</li>
</ul>
</div>
</div>
http://jsfiddle.net/ehv1xmL6/
Thanks

There are several ways to do this, including just having a string without a number ready to replace the label text. However, following what you already have I made the following changes:
I first added a class to the label to make it easier to select. Your current code selects all numbers inside the div.
<label class="ingredientLabel">Active Ingredient 1</label>
Second, I cloned the div. Then selected the html inside of .ingredientLabel and changed the number using Regex. I changed the regex to find any number inside the string and not just '1' in case the number changes for some reason.
$(document).ready(function(){
var counter = 1;
$("#addproduct").click(function(){
counter+= 1;
var clone = $('#product-1').clone(false);
clone.find(".ingredientLabel").html(clone.find(".ingredientLabel").html().replace(/[0-9]+/g, counter));
$(clone).appendTo(".activeingredients")
});
});
Here is the working fiddle: JSFiddle