Question

根据JQuery API's Documentation我正在使用正确的事件处理程序。

我也知道IE问题，并且坦率地说并不关心。因为这只是一个有趣的实验，

注意：尝试更改通过HTML或已在HTML文档中创建的type元素的input属性（或属性）将导致Internet Explorer 6,7或8抛出错误。

所以我一直试图让这个工作在过去的一小时内完成，我只剩下几个问题......

这可能吗？
如果是这样，我做错了什么？我该如何解决？

修改我的目的是将.selected的标记从span更改为用户指定的任何内容。我最初使用button作为例子，但我看到我的帖子被误解的容易程度。我的目的是将span标记更改为从button到input[type=text]元素的任何内容。全部取决于用户在文本框中键入的内容。

我不知道replaceWidth在这种情况下会如何帮助我，但是如果有人能够详细说明，那么我会非常感激。

$(document).ready(function() {
  // Show active tag
  $(".activetag").html( $(".selected").prop("tagName").toLowerCase() );

  // Change selected element's tag
  $(".convert").on("keyup", function() {
    $(".selected").replaceWidth( $("div") ).html( $(".selected").html() );
  });

  // Show selected element's code
  // ex. <span class="selected">Hello world</span>
  $(".code").val( $(".selected").html() );
});

<!DOCTYPE html>
<html>
  <head>
    <title>new document</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='IE=9' />
    <link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
    <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
  </head>
  <body>
    <div align="center">
      <span class="activetag">Hello world</span><br />
      <input type="text" class="convert"><br />
      <span class="selected">Hello world</span><br />
      <textarea class="code"></textarea>
    </div>
  </body>
</html>

Answer 1

JS更改标记名称

/**
 * This function replaces the DOM elements's tag name with you desire
 * Example:
 *        replaceElem('header','ram');
 *        replaceElem('div.header-one','ram');
 */
function replaceElem(targetId, replaceWith){
  $(targetId).each(function(){
    var attributes = concatHashToString(this.attributes);
    var replacingStartTag = '<' + replaceWith + attributes +'>';
    var replacingEndTag = '</' + replaceWith + '>';
    $(this).replaceWith(replacingStartTag + $(this).html() + replacingEndTag);
  });
}
replaceElem('div','span');

/**
 * This function concats the attributes of old elements
 */
function concatHashToString(hash){
  var emptyStr = '';
  $.each(hash, function(index){
    emptyStr += ' ' + hash[index].name + '="' + hash[index].value + '"';
  });
  return emptyStr;
}

相关小提琴就在这个link

中

Answer 2

这里有一些小曲可以完成这项工作：

var el = document.querySelector('.js-the-thing');
var outer = el.outerHTML;
el.parentElement.innerHTML = outer.replace(/(<)(\/)?strong\b/gi, '$1$2em');

示例：将 strong 替换为 em

var outer = "<strong><stronger><strong yes></strong></stronger></strong>";
outer.replace(/(<)(\/)?strong\b/gi, '$1$2em');

"<em><stronger><em yes></em></stronger></em>"

请记住，您会丢失任何附加到元素的事件处理程序，但是如果您使用在组件级别附加侦听器的标准做法，或 onclick= 的野蛮做法，您会好的。 ?

如果您不想替换所有类似标记的元素，您还可以使用 .innerHTML 来保存它们，然后替换新元素的 .innerHTML。

Answer 3

因此在得知您无法直接更改tagName之后。还有几种方法可以做到这一点。

下面的示例是使用隐藏的textarea来保存html并使用文本框，按钮和.replaceWith更改我们的标记。这样我们就可以获得更多控制权，而不仅仅是使用keyup。另外这种方式我不必担心失去我的元素，但我也节省了处理能力，因为我没有浏览器做的工作比它需要的更多。

Here's使用名为.replaceTagName的JQuery插件的小提琴。（这个插件对我的需求并不方便。因为我也想调用input[type=text]而且这个插件不允许这样处理html而不是值。但是这个插件可能对其他人有帮助）< / p>

Here's以下相同的演示，但我改为使用条件/三元运算符。

$(document).ready(function() {

  // 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\" \>");
      $(".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\" \>");
      $(".selected").val( $(".code").val() );

      // Check if it's an input button
    } else if ( $val === "input[type=button]" ) {
      $(".selected").replaceWith( "<input type=\"button\" class=\"selected\" \>");
      $(".selected").val( $(".code").val() );

      // Check if it's a textarea
    } else if ( $val === "textarea" ) {
      $(".selected").replaceWith( "<" + $val + " class=\"selected\" \>");
      $(".selected").val( $(".code").val() );

      // Use text as a placeholder to make a span tag
    } else if ( $val === "text" ) {
      $(".selected").replaceWith( "<span class=\"selected\" \>");
      $(".selected").html( $(".code").val() );
    } else {

      // Make any others specified
      $(".selected").replaceWith( "<" + $val + " class=\"selected\" \>");
      $(".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() );
});

.hide {
  display: none;
}

<!DOCTYPE html>
<html>
  <head>
    <title>new document</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='IE=9' />
    <link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
    <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
  </head>
  <body>
    <div align="center">
      <input type="text" class="newtag" placeholder="tagName here..."><br />
      <input type="button" class="convert" value="convert"><br />
      <span class="selected">Hello world</span><br />
      <textarea class="code hide"></textarea>
    </div>
  </body>
</html>

动态更改元素的TagName？

3 个答案: