動態更改元素的標記名？

根據JQuery API's Documentation我使用正確的事件處理程序。動態更改元素的標記名？

我也意識到IE的問題，以及坦率地說並不在乎。由於這僅僅只是一個好玩的實驗，

注：試圖改變通過HTML或已在HTML文檔中創建的input元素的type屬性（或屬性）將導致引發錯誤由Internet Explorer 6，7或8

所以我一直試圖讓這過去一小時工作，我留下了幾個問題...

這甚至可能嗎？
如果是的話我在做什麼錯&我該如何解決它？

編輯： 我的目的是從到任何用戶指定的span改變.selected的標籤。我原本以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>

來源

2015-01-01 Michael Schwartz

什麼讓你覺得你可以改變'.tagName'？通常的解決方案是用所需類型的新DOM元素替換當前標籤（及其子標籤）。 – jfriend00

而且，一些其他替代解決方案：http://stackoverflow.com/questions/2815683/jquery-javascript-replace-tag-type和http://upshots.org/javascript/jquery-change-tag-name – jfriend00

它不是一個愚蠢的imo，因爲它似乎使輸入類型屬性與標記名混淆，並且可能需要'$（「。」selected「）。attr（」type「，」button「）;' – andrew

所以學習，你不能直接改變標記名本身之後。還有幾種方法可以做到這一點。

下面的示例是通過使用隱藏的textarea來保存html和使用文本框，按鈕和.replaceWith更改我們的標記。這樣我們就可以擁有更多的控制權，而不僅僅是使用keyup。也是這樣，我不必擔心會丟失我的元素，而且我正在節省處理能力，因爲我沒有瀏覽器做任何工作而不是它需要做的事情。

Here's使用名爲.replaceTagName的JQuery插件的小提琴。（這個插件並不方便我的需要，因爲我也想打電話給input[type=text]，這個插件不會允許這樣的事情，因爲它處理html而不是數值，但是這個插件可能對別人有幫助）

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>

來源

2015-01-02 05:40:51

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

來源

2015-01-04 13:02:16 illusionist

可以看到這個鏈接也 https://cbabhusal.wordpress.com/2015/01/04/dynamically-change-html-tag-of-elements/ – illusionist

動態更改元素的標記名？

回答

相關問題