We Keep Coding

How to pass a JavaScript variable to DIV tag?

I am trying a code to pass a javascript variable to the div tag to change its attribute. If anyone knows how to do this, help me.
<div id="rate" class="money" data-wpac-chan=""></div>
I want to pass a javascript variable to the data-wpac-chan.
<script type="text/javascript">
var div = document.getElementById("rate").data-wpac-chan = "bal";
</script>
It is not working.
I want to replace data-wpac-chan=" " to data-wpac-chan="bal"

This should do it:
document.getElementById("rate").setAttribute("data-wpac-chan", "bal");
SetAtrribute will set any attribute on an HTML element.

You can also use dataset to assign the value to the attributes that has data-. Notice that, you need to use the camelcase as attribute name. So, wpac-chan becomes wpacChan
document.getElementById("rate").dataset.wpacChan = 'bal'
<div id="rate" class="money" data-wpac-chan="">sadasd</div>

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

custom attr selector using jquery

<div id="placeholdSlots">
<div sort-helper="1"></div>
</div>
How select the div using sort-helper custom attr? I know attr('sort-helper') can only get the value.

$('div[sort-helper]');
or in vanillaJS
document.querySelectorAll('div[sort-helper]');
Anyway I would suggest to use a data-* attribute instead, e.g.
<div data-sort-helper="1"></div>

use jQuery attribute selector
alert($('div[sort-helper="1"]').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="placeholdSlots">
<div sort-helper="1">abc</div>
</div>

jQuery is not the only way. You can use direct Javascript, like this:
Retrieving the firt div with an attribute called sort-helper
var elem = document.querySelector("[sort-helper]");
Retrieving all divs with an attribute called sort-helper
var list = document.querySelectorAll("[sort-helper]");
This is faster that jQuery because it is native code. And it is now cross-browser (for modern browsers ;-)).

how to assign variable in this jquery code?

i have a few divs
<div number='one_one' />
<div number='one_two' />
<div number='one_three' />
in jquery variable i have
var session_one = "one_one";
my problem is i cant click programatically the div with that number attribute
here is my trying :
$("div[number=session_one]").click()
but instead of click i have got an Object
Object[]
please help

Concatenate it like bellow
$("div[number=" + session_one + "]").click()

$("div[number='"+session_one+"']").trigger("click");
You are checking session_one with div number. But there is no div with number session_one. So you have to pass your div number as shown above.

Use: $("div[number=" + session_one + "]").click()
FYI: I wouldn't use the property "number" in a div. Use "id" or at least "data-number" which is html5 valid.

i think its because number is not a valid HTML Attribute use HTML5 data attribute as
<div data-number='one_one' />
<div data-number='one_two' />
<div data-number='one_three' />
then jquery
var session_one = "one_one";
$("div[data-number=" + session_one + "]").click()

The right syntax should be like this:
$("div[number="+session_one"+]").click(function(){
alert("clicked");
});
If you want to trigger it automatically, use this:
$("div[number="+session_one"+]").trigger("click");

Jquery change value of span tag - reference from another div

So my html code is:
<div class="product-details">
<div class="availability in-stock">
Availability: <span>In stock</span>
</div>
</div>
I would like to use Jquery to change the span value of "in stock". I am somewhat new to Javascript and Jquery, so how would I change that span value without it having an id to reference.
Many thanks in advance!

$('.in-stock span').html("your new string");
http://jsfiddle.net/hQqtU/

$('.product-details .availability span').text('foo');
Fiddle: http://jsfiddle.net/maniator/EryVF/

What you are looking for is either the text() or the html() like so:
$('.availability span').html('This is what you want to change it to');
Here is an example: JsFiddle Demo