属性を失うことなく要素タグを変更する方法

Question

要素の属性を失うことなく、要素タグを変更したいと考えています。

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

：私は、コードを試してみた

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

：私はそれは次のようになりますので、H1にH4を変更したい

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

：

この

は、要素であります

しかし、このように私はこの属性を失っています.innerHTMLは未定義を返します 私はを変更しようとしました〜$('h4').innerHTMLとなり、それでも未定義を返します。

Answer 1

attrメソッドを使用してすべての属性を1つずつ取得し、新しい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/

Answer 2

最初の事はすべての属性を取得することです。あなたもここで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); 

Answer 3

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

Answer 4

本当にあなたが最後の要素で何をしたいかに依存します。その時間の状態で要素を複製したいだけなら、jQueryのclone（）メソッドはいくつかのコードを保存するのに役立ちます。詳細については、https://api.jquery.com/clone/