如何更改元素標記而不會丟失屬性

這是元素：

<h4 class="form-title ng-binding" id="s50" ng-bind-html="'s50' | translate" translate-cloak="s50">searching</h4>

我想改變H4到H1所以它看起來就像這樣：

<h1 class="form-title ng-binding" id="s50" ng-bind-html="'s50' | translate" translate-cloak="s50">searching</h1>

我已經試過代碼：

$('h4').replaceWith($('<h1>' + this.innerHTML + '</h1'));

但以這種方式我失去了屬性this.innerHTML返回undefined 我試圖改變this.inner.HTML到$('h4').innerHTML，仍然返回undefined。

來源

2016-03-27 barak

如何使用和更改CSS而不是標籤？ – John

您是否在所有瀏覽器中或僅在Internet Explorer中丟失了屬性？ – Technoh

我需要這個標籤是H1，我不能觸摸這個網站的代碼，我只給這個網站提供一個我自己的腳本服務，我需要添加一個代碼到我的腳本中，將這個h4標籤更改爲h1標籤。 – barak

您可以使用attr方法逐個獲取所有屬性，並將它們傳遞給新的h1元素。

var $h4 = $('h4#s50'); 
var h4bind = $h4.attr('ng-bind-html'); 
var h4class = $h4.attr('class'); 
var h4id = $h4.attr('id'); 
var h4tc = $h4.attr('translate-cloak'); 
var h4text = $h4.text(); 

$h4.replaceWith('<h1 ng-bind-html="'+ h4bind +'" class="'+ h4class +'" id="'+ h4id+'" translate-cloak="'+h4tc+ '">'+ h4text +'</h1>');

這裏是解決方案：https://jsfiddle.net/h2jfu0e8/

來源

2016-03-27 11:43:30

您從這裏複製。不是嗎？ http://stackoverflow.com/a/3665860/1209018。而不是這樣做，你可能已經把這個問題標記爲一個騙局。 –

你需要做的第一件事是讓所有的屬性。當然你也可以在這裏獲得innerHTML。

var $h4 = $('h4'); 
var attrs = $h4[0].attributes; 
var html = $h4[0].innerHTML;

attrs現在是屬性的數組，你會希望它看起來像一個對象，所以你可以通過它進入.attr()方法。

var attr = {}; 
$.each(attrs, function(i,e) { attr[e.nodeName] = e.nodeValue; }); 
var $h1 = $('<h1/>').html(html).attr(attr); 
$h4.replaceWith($h1);

來源

2016-03-27 11:44:24

作品！謝謝:) – barak

$(document).ready(function() { 
    $('h4').replaceWith('<h1>' + document.querySelector("h4").innerHTML + '</h1>'); 
});

來源

2016-03-27 11:55:31

真的取決於你想在年底的元素做什麼。如果你只想用當時的狀態克隆元素，那麼jQuery的clone（）方法可以幫助保存一些代碼。欲瞭解更多信息，請參閱：https://api.jquery.com/clone/

來源

2016-03-27 11:56:59 Crix

如何更改元素標記而不會丟失屬性

回答

相關問題