如何在不丢失属性的情况下更改元素标记

How to change element tag without losing attributes

本文关键字：情况下 元素 属性      更新时间：2023-09-26

我想在不丢失元素属性的情况下更改元素标记。

这就是要素：

<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返回未定义的属性我已经尝试将this.inner.HTML更改为$('h4').innerHTML，但它仍然返回undefined。

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

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

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

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

相关文章：