HTML, CSS and JavaScript playground

$(document).ready(function() {
  $(".newtag").val( $(".selected").prop("tagName").toLowerCase() );
  $(".newclass").val( $(".selected").attr("class").toLowerCase() );
  $(".newname").val( $(".selected").attr("name").toLowerCase() );
  $(".newhref").val( $(".selected").attr("href").toLowerCase() );
  
  // Change selected element's tag function
  var changeTagName = function() {
    var $val = $(".newtag").val().trim().toLowerCase();

// If no value is set return to default
    if ($.inArray($val, [""]) > -1) {
      $(".selected").replaceWith( "<span class=\""+ $(".selected-element").val() +"\" \>");
      $(".selected").html( $(".code").val() );
      // Check if it's a textbox
    } else if ($.inArray($val, ["input[type=text]", "input", "textbox"]) > -1) {
      $(".selected").replaceWith( "<input type=\"text\" class=\""+ $(".selected-element").val() +"\" \>");
      $(".selected").val( $(".code").val() );

// Check if it's an input button
    } else if ( $val === "input[type=button]" ) {
      $(".selected").replaceWith( "<input type=\"button\" class=\""+ $(".selected-element").val() +"\" \>");
      $(".selected").val( $(".code").val() );

// Check if it's a textarea
    } else if ( $val === "textarea" ) {
      $(".selected").replaceWith( "<" + $val + " class=\""+ $(".selected-element").val() +"\" \>");
      $(".selected").val( $(".code").val() );

// Use text as a placeholder to make a span tag
    } else if ( $val === "text" ) {
      $(".selected").replaceWith( "<span class=\""+ $(".selected-element").val() +"\" \>"); 
      $(".selected").html( $(".code").val() );
    } else if ( $val === "a" ) {
      $(".selected").replaceWith( "<a "+ ( $(".newclass").val() === "" ? "" : "class=\"" + $(".newclass").val() + "\"" ) + ( $(".newname").val() === "" ? "" : "name=\"" + $(".newname").val() + "\"" ) + ( $(".newhref").val() === "" ? "" : "href=\"" + $(".newhref").val() + "\"" ) + "\>");
      $(".selected").html( $(".code").val() );
    } else {
      // Make any others specified
      $(".selected").replaceWith( "<" + $val + " class=\""+ $(".selected-element").val() +"\" \>");
      $(".selected").html( $(".code").val() );
    }

// Return tagName
    $(".newtag").val( $(".selected").prop("tagName").toLowerCase() );
  };

// Change tagName from "Enter" Key
  $(document).keydown(function(e) {
    if ($(".newtag").is(":focus")) {
      if (e.which === 13) {
        changeTagName();
      }
    }
  });

// Change selected element's tag
  $(".convert").on("click", function() {
    changeTagName();
  });

// Show selected element's code
  // ex. <span class="selected">Hello world</span>
  $(".code").val( $(".selected").html() );
});