получить открывающий тег, включая атрибуты - outerHTML без innerHTML

Question

Я хотел бы получить определенный элемент тега с его атрибутами из DOM.Например, из

<a href="#" class="class">
  link text
</a>

я хочу получить <a href="#" class="class">, опционально с закрывающим </a>, в виде строки или какого-либо другого объекта.На мой взгляд, это было бы похоже на получение .outerHTML без .innerHTML.

Наконец, мне нужно это, чтобы обернуть некоторые другие элементы через jQuery.Я попытался

var elem = $('#some-element').get(0);
$('#some-other-element').wrap(elem);

, но .get() возвращает элемент DOM, включая его содержимое.Также

var elem = $('#some-element').get(0);
$('#some-other-element').wrap(elem.tagName).parent().attr(elem.attributes);

терпит неудачу, поскольку elem.attributes возвращает NamedNodeMap, который не работает с attr() в jQuery, и я не смог преобразовать его.Следует признать, что приведенные выше примеры не очень разумны, поскольку они также копируют более не уникальный идентификатор элемента.Но есть ли простой способ?Большое спасибо.

Answer 1

Для будущих Google, есть способ сделать это без jQuery:

tag = elem.outerHTML.slice(0, elem.outerHTML.indexOf(elem.innerHTML));

Поскольку outerHTML содержит открывающий тег , за которым следует зеркало того, что содержит innerHTML, мы можем подстроковать externalHTML от 0 (начало открывающего тега) до того, где начинается innerHTML (конец открывающего тега), и так как innerHTML является зеркалом externalHTML, за исключением открывающего тега, останется только открывающий тег!

Этот работает с <br> тегами, <meta> тегами и другими пустыми тегами:

tag = elem.innerHTML ? elem.outerHTML.slice(0,elem.outerHTML.indexOf(elem.innerHTML)) : elem.outerHTML;

Поскольку innerHTML будет пустым в самозакрывающихся тегах, а indexOf('') всегда возвращает 0, вышеуказанная модификация проверяет наличие innerHTML в первую очередь.

Answer 2

var wrapper = $('.class').clone().attr('id','').empty();

• Возможно, вы захотите изменить селектор, чтобы он более точно соответствовал элементу <a>, который вы ищете.
• clone() создает новую копию соответствующего элемента (ов), дополнительно копируя обработчики событий.
• Я использовал attr, чтобы очистить идентификатор элемента, чтобы мы не дублировали идентификаторы.
• empty() удаляет все дочерние узлы ('innerHTML').

Answer 3

Вот мое решение:

opentag=elem.outerHTML.slice(0, elem.outerHTML.length-elem.innerHTML.length-elem.tagName.length-3);

Полагаю, что закрывающий тег имеет вид: "</"+elem.tagName+">".

Answer 4

К сожалению, @ ответ AaronGillion не является надежным, как я сказал в комментарии . Спасибо @ sus . Я рекомендую по-своему с небольшим изменением поддержки <self-closing tags />:

function getOpenTag(element: HTMLElement): string {
    const outerHtml = element.outerHTML;
    const len = outerHtml.length;

    const openTagLength = outerHtml[len - 2] === '/' ? // Is self-closing tag?
            len :
            len - element.innerHTML.length - (element.tagName.length + 3);
    // As @sus said, (element.tagName.length + 3) is the length of closing tag. It's always `</${tagName}>`. Correct?

    return outerHtml.slice(0, openTagLength);
}

^{Код в Typescript. Удалите типы (HTMLElement и number), если вы хотите чистый Javascript.}