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/)

Toogle div based on span class value

I have the following block
<div id="discountText">
<span>some text</span>
<span class="discountType" style="display:none;">
</div>
installerDiscountType contains a discount type (preferred, saved, etc.)
How do I show the div in case <span class="discountType" equals "AAA" and hide it in case it equals something else?
I tried multiple ways but I keep getting undefined values.

This will show "Some Text AAA" It shows "Some Text" because that span does not have class "discountType"
let types = document.querySelectorAll('.discountType')
types.forEach(node => {
if(node.innerText !== "AAA") {
node.style.display = 'none';
}
})
<div id="discountText">
<span>some text</span>
<span class="discountType">Hello world</span>
<span class="discountType">AAA</span>
</div>

AngularJS & jQuery - How to find the ID of a child div on a Click event for its parent?

I have code in HTML like:
<div id="edit" ng-click="editFunction($scope)">
<span id="1">
click1
</span>
<span id="2">
click2
</span>
<span id="3">
click3
</span>
<span id="4">
click4
</span>
....
</div>
In controller.js:
myDIV.controller('control',function($scope){
$scope.editFunction($event){
alert($event.target.id);
}
});
When a user clicks on the div tag, he should click on any of the span tags. Using the code we are able to get the div id.
However, I need to know which span is clicked. Meaning, the ID of that span.

By sending $index, you get the number of the element in the current repeat.
So instead of trying to send an event, and then understand from that what span was clicked, just use the tools that angular gives you out of the box.
HTML
<div id="edit">
<span ng-repeat="click in clicks" ng-click="editFunction($index)">
{{ click }}
</span>
</div>
And then in your controller:
myDIV.controller('control',function($scope){
$scope.clicks = [1, 2, 3, 4]; // Fill the array with real data.
$scope.editFunction(index){
alert(index);
}
});

U can use like this
<div id="edit" ng-click="editFunction($event)">
element.target.attributes.id.value

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>

wrapping div around string using jquery

How do i wrap a div class div class="includingVAT"></div> around the string text :incl. MwSt
<span id="VariantPrice_3181">
<span class="variantprice">
<span class="pricelabel">Preis </span>
240,00 (CHF)
</span>
incl. MwSt
<span id="plus-shipping">plus-shipping</span>
</span>
using jquery?
it needs to look like this:
<span id="VariantPrice_3181">
<span class="variantprice">
<span class="pricelabel">Preis </span>
240,00 (CHF)
</span>
<div class="includingVAT"> incl. MwSt</div>
<span id="plus-shipping">plus-shipping</span>
</span>
the string without span or div needs the div class includingVAT as there could be different language translations.

You can try this example here: DEMO
var text = $('#plus-shipping').map(function(){
return this.previousSibling.nodeValue
});
$('#plus-shipping').prepend('<div class="includingVAT">' + text[0] + '</div>');

$(".pricelabel").after('<div class="includingVAT">');
$(".plus-shipping").before('</div>');
This is awkward and error-prone. Is there any-way you can insert the whole div? Why does incl. MwSt exist only in the HTML?