Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<title>Dynamically Adding Elements w/ Attributes</title>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
  <div class="drawing-area"></div>
  
  <div class="toolbox">
    <button class="confirm-add-button">Button</button>
    <table class="fill table-in add-button-properz">
      <tr>
        <td>class:</td>
        <td><input type="text" class="newbtnclassname"></td>
      </tr>
      <tr>
        <td>text:</td>
        <td><input type="text" class="newbtntxt"></td>
      </tr>
    </table>
    <textarea class="canvas-code fill"></textarea>
  </div>
</body>
</html>
​
 
$(document).ready(function() {
  var preview = $(".drawing-area"),
      code = $(".canvas-code");
  
  var UpdateView = function() {
    $(code).val($(preview).html());
    $(preview).html($(code).val());
  };
  
  $(".confirm-add-button").on("click", function() {
    var $ctrl = $('<button/>').attr({ class: $('.newbtnclassname').val()}).html($('.newbtntxt').val());
    $(".drawing-area").append($ctrl);
    UpdateView();
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers