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

Question

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>

Can you give more info? Why is your input hidden? Are you using a server-side framework and making a form? If you want to change in response to changing value of input, use event listeners. — starball
– starball ♦, Commented Aug 22, 2022 at 17:38
@DimiVi I tried to change the value inside "span" by adding an input any other idea would do the job ? — Akram BENGHANEM
– Akram BENGHANEM, Commented Aug 22, 2022 at 17:40
Are you trying to do this on page load? If you want to add test_succeed to the span, you can use let span = document.getElementById('tag-option'); span.innerText = 'test_succeed'; — disinfor
– disinfor, Commented Aug 22, 2022 at 17:40

disinfor · Accepted Answer · 2022-08-22 19:45:39Z

1

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>

edited Aug 22, 2022 at 19:45

answered Aug 22, 2022 at 17:42

disinfor

11.6k2 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akram BENGHANEM Over a year ago

One more thing, I want to add <span class="close"></span> with "test_succeed"

Eduardo Veras · Accepted Answer · 2022-08-22 17:44:18Z

0

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

answered Aug 22, 2022 at 17:44

Eduardo Veras

1793 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

EDIT

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDIT

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related