Jquery clone and append to input value

Question

Can anyone tell me how do you clone from a span element and append to input value by clicking the span element itself? Here is the script.

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("span#username").click(function() {
        $("span#username").clone().appendTo("#test");


      });
    });
  </script>
</head>

<body>

  <span id="username"> User </span><br><br>
  <input type="text" id="test" value="" />


</body>

</html>

ibrahim mahrir · Accepted Answer · 2017-02-18 20:52:59Z

1

You have to set the value of the input (jQuery.val()) to the text content of the span (jQuery.text()) like this:

// IDs are enough
$("#username").click(function() {
    $("#test").val($(this).text()); // this is the span beign clicked
});

No jQuery:

document.getElementById("username").addEventListener("click", function() {
    document.getElementById("test").value = this.textContent;
});

edited Feb 18, 2017 at 20:52

answered Feb 18, 2017 at 20:31

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

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

1 Comment

ibrahim mahrir Over a year ago

@Neof I added the code with no jQuery, just vanilla JS!

Collectives™ on Stack Overflow

Jquery clone and append to input value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related