How to change html inside a span

Question

I want to change the content of a span in my form HTML:

<form action="javascript:submit()" id="form" class="panel_frame">

    <label>Origin:</label>
    <div class="input-group" id="input-group">
        <input type="text" id="origin" name="origin" class="form-control">
        <span class="input-group-btn">
            <button id="btn-default" class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
            </button>
        </span>
    </div>

What I want change is che content of <span class="input-group-btn"> with

<button id="btn-default" class="btn btn-default" type="button">
    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>

So what change is: the icon pushpin to remove and the action useCurrentPosition to clearPosition.

I' using jquery and despite I've read other answer about similar question on Stack like: How can I change the text inside my <span> with jQuery? and how to set a value for a span using JQuery I haven't solved the issue.

I tried:

$("#input-group span").html('
    <button id="btn-default" class="btn btn-default" type="button" onclick="br_bus.useCurrentPosition()">
    <span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
    </button>
');

,giving an id to the span and also modify the full div, but none solved my problem. What am I missing?

`"#origin span"` searches for `span`s **inside** `#origin`, and there are no `span`s inside `#origin`. — Regent, Aug 28 '15 at 11:18
Now code does work with `document.ready` (if script is before `form` in HTML) and having HTML code for replacing in single line: [fiddle](http://jsfiddle.net/v3Lfnuuk/). — Regent, Aug 28 '15 at 11:40

Curtis · Answer 1 · 2015-08-28T11:58:37.363

2

Rather than changing the function called in the onclick attribute I suggest having a flag in one function to define the logic it should follow.

For example:

function positionChange(this){
   var $this = $(this);
   if(!$this.data("currentpositionused")){
       //useCurrentPosition() code here
       $this.data("currentpositionused", true);
   }
   else {
       //clearPosition() code here
       $this.data("currentpositionused", false);
}

Then change your HTML to:

<button class="btn btn-default" type="button" onclick="positionChange(this)">

edited Aug 28 '15 at 11:58

answered Aug 28 '15 at 11:19

Curtis

101,612
66
270
352

You should *not* use variables to hold UI state. This does not scale well. – iCollect.it Ltd Aug 28 '15 at 11:21
And (especially having jQuery on the board) it will be better to forget about `onclick` attribute at all. – Regent Aug 28 '15 at 11:22
@Regent Although I 100% agree (jQuery use or not) I consider this outside the scope of the issue. – Curtis Aug 28 '15 at 11:55
Well, we actually don't know what the issue with original code is at all :) As I have mentioned in question's comments, code does work inside `document.ready` with HTML-code to replace as single-line String. So this answer is first step of upgrading original code (fixing OP's problem as consequence/side-effect), and I have only mentioned second step of upgrading. And both our steps are outside the scrope of the issue. – Regent Aug 28 '15 at 12:02

Kriggs · Accepted Answer · 2015-08-28T12:52:48.650

Here's a way to overcome the problem of changing the onclick attribute, which is bad practice, without storing a Global var, and using jQuery delegation (learn to use it, it's really good):

$(document).on('click','.btn', positionChange); // Give that button an id on his own and replace '.btn' with '#newId'

// Not using an anonymous function makes it easire to Debug
function positionChange(){
   var $btn = $(this), // Caching jQuery elements is good practice
       $span = $btn.find('span'), // Just caching
       pushpinApplied = $span.hasClass('glyphicon-pushpin'); // Check which icon is applied

   ( pushpinApplied ) ? useCurrentPosition() : clearPosition();

   $span.toggleClass( 'glyphicon-pushpin glyphicon-remove' );
}

score 0 · Answer 3 · edited Aug 28 '15 at 11:29

0

Try this:

$("span.input-group-btn").html('<button class="btn btn-default" type="button" onclick="clearPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>');

edited Aug 28 '15 at 11:29

Regent

5,142
3
21
35

answered Aug 28 '15 at 11:23

RQ Bukhari

167
3
8

This doesn't change nothing – Mitro Aug 28 '15 at 11:31

Vignesh Bala · Answer 4 · 2015-08-28T11:27:20.513

0

If you want to change only the onclick attribute of the button inside the particular span you can use the following in your script.,

$(document).ready(function(){
   $("span.input-group-btn button").attr("onclick","clearPosition()");
});

EDIT

$(document).ready(function(){
   $("span.input-group-btn button").attr("onclick","clearPosition()");
   $("span.input-group-btn button span").attr("class","Your_class");
});

And also learn about how to change/add/remove attribute values....

edited Aug 28 '15 at 11:27

answered Aug 28 '15 at 11:25

Vignesh Bala

889
6
25

1

"You can use" *, using "have to" makes newbiews think this is the only alternative. – Kriggs Aug 28 '15 at 11:26
not only, I wanto to change also glyphicon glyphicon-pushpin – Mitro Aug 28 '15 at 11:26

score 0 · Answer 5 · edited May 23 '17 at 12:29

0

Is it like This ?

how to change onclick event with jquery?

$("#id").attr("onclick","new_function_name()");

jquery change class name

$("#td_id").attr('class', 'newClass');

If you want to add a class, use .addclass() instead, like this:

$("#td_id").addClass('newClass');

edited May 23 '17 at 12:29

Community

1
1

answered Aug 28 '15 at 11:30

kuki

79
2
9

How to change html inside a span

5 Answers5