Получить тег html из элемента без внутреннего текстового содержимого

Question

Используя Javascript, я собираюсь взять элемент DOM и взять только его тег, класс, идентификатор и т. Д. (Вещи в скобках), но игнорировать фактический текст внутри. Вроде как противоположность innerHTML/textContent,

Так что я надеюсь получить Div вроде этого:

<p id="foo">Ipsum Lorem</p>

в строку это:

<p id="foo"> </p>

Answer 1

Использование .cloneNode или если вы не хотите использовать это:

Получите имя узла и сведите атрибуты элементов в строку.

'use strict';

const elem = document.getElementById('foobar');
const nodeName = elem.nodeName.toLowerCase();
const attrs = [...el.attributes].map((a) => {
  if (a.value === '')
    return a.name;
  else if (a.value.indexOf('"') > -1)
    return `${a.name}='${a.value}'`;
  else
    return `${a.name}="${a.value}"`;
}).join(' ');
const str = `<${nodeName} ${attrs}></${nodeName}>`;

https://jsfiddle.net/k22tyqbr/3/

Answer 2

Заменить innerHTML внутри outerHTML ни с чем, либо, как я сделал здесь, эллипсы, "...":

var txt = elem.outerHTML.replace(elem.innerHTML, '...');

После выбора элемента (getElementById("foo")),

<p id="foo">Ipsum Lorem</p>

это вернет string в var txt

<p id="foo">...</p>