We Keep Coding

Change the value of span using Javascript or Jquery using <input> or text attribute

I want to change span value to <span class='tag'>test_succeed</span>,
I tried "input" but it doesn't work, any idea ?
<span class="tag" id="tag-option">
<input type='hidden' name='tag-value' value='' id="test-input">
<span class="close"></span>
</span>
<script>
document.getElementById('test-input').value = "test_succeed";
</script>

If you are only trying to add text to the span, you don't need an input element. You can use the innerText function.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
<span class="tag" id="tag-option">
<span class="close"></span>
</span>
<script>
document.getElementById('tag-option').innerText = 'test_succeed';
</script>
EDIT
To keep the "close" span, you can use prepend:
https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend
<span class="tag" id="tag-option">
<span class="close">Close Span</span>
</span>
<script>
document.getElementById('tag-option').prepend('test_succeed');
</script>

When you are talking about <tag>value</tag> you are referring to a DOM object, in this particular case you are trying to update the inner HTML for that tag.
So you can do it using:
document.getElementById('my_id').innerHTML = 'my text';
(https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
Or using jQuery:
$('#my_id').html('my text');
(https://api.jquery.com/html/)

Populate elements with class name using Javascript

I have some HTML which looks like this
<p>Latte: <span class="hot-drink"></span></p>
<p>Capuccino: <span class="hot-drink"></span></p>
<p>Coca Cola: <span class="cold-drink"></span></p>
<p>Water: <span class="cold-drink"></span></p>
<p>Iced tea: <span class="cold-drink"></span></p>
I would like to use javascript to populate all of the <span> elements with the class hot-drink applied to them with the variable hot-drink-status().
So far I have managed to do this to only one of the elements. The code I wrote looks like this:
var hot-drink = "Avaiable";
document.querySelectorAll('.hot-drink')[0].innerHTML = hot-drink;
I believe I need to change the [0] to something else. I have tried [i] but this does not work.
I know that querySelectorAll is working as it allows me to apply the script to any element. I am just unable to apply the script to all element.
The outcome I am looking for is the HTML to be rendered as below
<p>Latte: <span class="hot-drink">Available</span></p>
<p>Capuccino: <span class="hot-drink">Available</span></p>
<p>Coca Cola: <span class="cold-drink"></span></p>
<p>Water: <span class="cold-drink"></span></p>
<p>Iced tea: <span class="cold-drink"></span></p>
All elements with the class hot-drink are populated with the text "Available"

Try (do not use minus char in variable names - camel case instead)
var hotDrink = 'Available';
document.querySelectorAll('.hot-drink').forEach(el=> el.innerHTML= hotDrink)
<p>Latte: <span class="hot-drink"></span></p>
<p>Capuccino: <span class="hot-drink"></span></p>
<p>Coca Cola: <span class="cold-drink"></span></p>
<p>Water: <span class="cold-drink"></span></p>
<p>Iced tea: <span class="cold-drink"></span></p>

Javascript select span on parent span and use wildcard

I want to use JavaScript to select the span element with a class of "price", but the selection has to be with the parent span with id "product-price-895". Additionally, I want to use a wildcard for the number part of the ID, so the selector has to be something like "#product-price-*"
<span id="product-price-895" data-price-amount="12.95" data-price-type="finalPrice" class="price-wrapper " >
<span class="price">€ 12,95</span>
</span>

You can use the following CSS selector: [id^=product-price] > .price.
The selector uses a child combinator which means it is only concerned with elements having the class of price that are an immediate child of any element whose id attribute begins with "product-price" (due to the attribute selector).
var spanEls = document.querySelectorAll('[id^=product-price] > .price');
spanEls.forEach(span => console.log(span.innerHTML));
<span id="product-price-1" data-price-amount="12.95" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">€ 12,95</span>
</span>
<span id="product-price-2" data-price-amount="5.50" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">€ 5,50</span>
</span>
<span id="product-price-3" data-price-amount="25.90" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">€ 25,90</span>
</span>

jQuery selectors can handle this fairly easily: https://api.jquery.com/category/selectors/
If you need to use vanilla JavaScript, you can use document.querySelector(): https://www.w3schools.com/jsref/met_document_queryselector.asp

If you want the child with the class "price" from the node with the id "product-price-895", you need to use the following css selector: #product-price-895 > .price.
In javascript I would use: document.querySelector('#product-price-895 > .price').

A more efficient way may be to use an attribute selector instead of the ID. You could search by document.querySelectorAll("[data-price-amount] > .price") or document.querySelectorAll("[data-price-type="finalPrice"] > .price"). This will also give you a bit more control and flexibility if the way your IDs get generated changes in the future.

To get all the spans with the class price where the parent starts with product-price- you could use an attribute starts with selector ^=
$("span[id^=product-price-] span.price")
document.querySelectorAll('span[id^=product-price-] span.price').forEach(x => console.log(x.innerHTML))
<span id="product-price-895" data-price-amount="12.95" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">€ 12,95</span>
<span class="price">€ 13,95</span>
<span class="prices">€ 14,95</span>
<span class="price">€ 15,95</span>
<span><span class="price">€ 18,95</span></span>
</span>
<span class="price">€ 16,95</span>

Hide class if another span's child class is visible using jQuery

It's similar to this topic but not working.
Here my codes:
<span class="main_price">
$50
</span>
<span class="option_price">
<span class="option_price_value">
$70
</span>
</span>
By default "main_price" and "option_price" class is visible and "option_price_value" class is visible where has the options.
Now I'm trying to hide "main_price" when "option_price_value" is visible.
For more clear,
When has no options by default it's showing
<span class="main_price">
$50
</span>
<span class="option_price">
</span>
And when options available it should look like
<span class="main_price" style="display:none;">
$50
</span>
<span class="option_price">
<span class="option_price_value">
$70
</span>
</span>

EDITED to include jquery, my fiddle is working now. Check this new version out: https://jsfiddle.net/cbbs2oms/3/
Basically checking if there's any text in the option span and showing the main price only if there's not option value. Let me know if I've misunderstood.
$(".option_price_value").each(function(){
if ($(this).text().trim().length) {
$('.main_price').hide();
console.log('has option');
} else {
$('.main_price').show();
console.log('has no option');
}
});

Surround only text with node

I have some html that is in the form
<span class="prefix">something</span> (Optional)
Text
<span class="badge">Something else</span> (optional, can be multiple)
<span class="postfix">Another thing</span>
And I want to wrap the Text, but not the spans, in another span so that I can extract and replace it using jQuery as necessary. I can't edit the back end code that is generating this HTML. Given that I don't know in advance whether the first span will be there, or how many spans there will be at the end, is there any way to wrap the plain text so that it can be operated on?
I am hoping to get an output that looks something like this:
<span class="prefix">something</span>
<span class="txt">Text</span>
<span class="badge">something else</span>...
<span class="postfix">another thing</span>

Try this:
$('#container').contents()
.filter(function() { return this.nodeType === 3 })
.wrap('<span class="txt" />');
Based on this answer: https://stackoverflow.com/a/5291776/616535

filter() the contents() of the container element to those that are pure text nodes
wrap() them in a span
$('#container').contents().filter(function() {
return $(this)[0].nodeValue && $(this)[0].nodeValue.trim();
}).wrap('<span class="txt"/>');
.txt{
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">
<span class="prefix">something</span>
Text
<span class="badge">Something else</span>
<span class="postfix">Another thing</span>
</div>