Question

我想更改元素标记，但不会丢失元素的属性。

这是元素：

<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。

Answer 1

您需要做的第一件事就是获取所有属性。也可以在这里获得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 2

您可以使用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/

Answer 3

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

Answer 4

真的取决于你最终要对元素做什么。如果您只想克隆具有该时间状态的元素，则jQuery clone（）方法可以帮助您保存一些代码。有关详细信息，请参阅：https://api.jquery.com/clone/

如何更改元素标记而不丢失属性

4 个答案: