Как получить raw-содержимое тега html?

Question

[Роман Кофф]

Очень простая задача. Есть тег DIV, в нем содержится некий произвольный html-код, например:

https://jsfiddle.net/RomanKoff/v5pgurz3/

<div class="add-html-code test-mar">
  <b>Пример кода:</b>
  <br/>
  <p>1 < 2 + 3 > 4 = 5 : 6 * 7 / 8 \ 9 - 0</p>
  <img class="rounded" src="samples/001_p.jpg" alt="" />
  <img class="rounded-top" src="samples/002_p.jpg" alt="" />
  <img class="rounded-right" src="samples/003_p.jpg" alt="" />
  <img class="rounded-bottom" src="samples/004_p.jpg" alt="" />
  <img class="rounded-left" src="samples/005_p.jpg" alt="" />
  <img class="rounded-circle" src="samples/006_p.jpg" alt="" />
  <img class="rounded-pill" src="samples/007_p.jpg" alt="" />
  <img class="rounded-0" src="samples/008_p.jpg" alt="" />
</div>

Нужно получить содержимое тега DIV в неизменном виде. То есть, в строковую переменную должен быть помещен такой текст:

<b>Пример кода:</b>
<br/>
<p>1 < 2 + 3 > 4 = 5 : 6 * 7 / 8 \ 9 - 0</p>
<img class="rounded" src="samples/001_p.jpg" alt="" />
<img class="rounded-top" src="samples/002_p.jpg" alt="" />
<img class="rounded-right" src="samples/003_p.jpg" alt="" />
<img class="rounded-bottom" src="samples/004_p.jpg" alt="" />
<img class="rounded-left" src="samples/005_p.jpg" alt="" />
<img class="rounded-circle" src="samples/006_p.jpg" alt="" />
<img class="rounded-pill" src="samples/007_p.jpg" alt="" />
<img class="rounded-0" src="samples/008_p.jpg" alt="" />

Как это можно сделать на JavaScript (jQuery)?

Функция .html() преобразует код, она не подходит (как я понял).
Пропадает закрывающая косая черта для одиночных тегов (в примере IMG), а это существенно!
Вот что возвращает .html():

<b>Пример кода:</b>
<br>
<p>1 &lt; 2 + 3 &gt; 4 = 5 : 6 * 7 / 8 \ 9 - 0</p>
<img class="rounded" src="samples/001_p.jpg" alt="">
<img class="rounded-top" src="samples/002_p.jpg" alt="">
<img class="rounded-right" src="samples/003_p.jpg" alt="">
<img class="rounded-bottom" src="samples/004_p.jpg" alt="">
<img class="rounded-left" src="samples/005_p.jpg" alt="">
<img class="rounded-circle" src="samples/006_p.jpg" alt="">
<img class="rounded-pill" src="samples/007_p.jpg" alt="">
<img class="rounded-0" src="samples/008_p.jpg" alt="">

Answer 1

[Роман Кофф]

Решено:
1. получать содержимое нужно через .html() или .innetHTML
2. после исправляю закрывашку одиночных тегов регекспом .replace(/<((meta|img|link|br|hr|input|area|param|col|base).*?)>/g, '<$1 />')

Спасибо за ценные советы.

Comments

[Макс]

Интересный был вопрос, решение тоже такое токо видел. Спасибо что в комментах разъяснили

Это существенно только для xhtml strict, который уже все успели забыть

Про доктайп я тоже, подсознательно, догадывался, но всячески гнал от себя эту мысль

Answer 2

[Stalker_RED]

document.querySelector('.test-mar').innerHTML

Comments

[Роман Кофф]

У меня перестает вообще возвращать результат. Что-то я делаю неправильно:

String.prototype.escape = function () {
	var tmls = {
		'&': '&',
		'<': '&lt;',
		'>': '&gt;'
	};
	return this.replace(/[&<>]/g, function (tag) {
		return tmls[tag] || tag;
	});
};

(function ($) {
	$('.add-html-code').each(function () {
		var
			_this = $(this),
			s = _this.innerHTML.escape(),
			r = '<pre class="language-html line-numbers">' + s + '</pre>';
		alert(_this.innerHTML);
		if (_this.data('target')) {
			$('#' + _this.data('target')).html(r);
		}
		else {
			_this.after('<br/><h5>Code:</h5><div>' + r + '</div><p>&nbsp;</p>');
		}
	});
})(jQuery);

[Роман Кофф]

Исправил, все равно не подходит.
this.innerHTML — возвращает то же, что и _html.html()

Мне нужен RAW содержимого без изменений.

[Stalker_RED]

Роман Кофф, вместо

_this = $(this),
      s = _this.innerHTML.escape(),

просто
s = this.innerHTML
И мне кажется, или переменная s не объявлена?

[Роман Кофф]

Stalker_RED,

Переменная s находится в var. Это объявление с присвоением.

this.innerHTML — возвращает то же, что и _html.html()
при этом код отличается от исходного

https://jsfiddle.net/RomanKoff/v5pgurz3/

[Stalker_RED]

Роман Кофф, я кажется понял в чем дело.
вот в таком виде оно вытаскивает html

И он действительно отличается от того, что был в исходном коде. И это потому, что браузер уже распарсил исходник и построил на основе исходника DOM-дерево, и innerHTML это уже обработаный код.

Как вытащить именно исходный - без понятия. Рискну предположить, что только на уровне расширений браузерных это доступно.

[Stalker_RED]

Роман Кофф,

Пропадает закрывающая косая черта для одиночных тегов (в примере IMG), а это существенно!

У вас доктайп какой? Это существенно только для xhtml strict, который уже все успели забыть.

[Роман Кофф]

Stalker_RED
Абсолютли.
Мне уже так же разъяснили другие компетентные товарищи.
Про доктайп я тоже, подсознательно, догадывался, но всячески гнал от себя эту мысль.

В моем случае поможет только пост-фиксация одинарных тегов после получения от .html() / .inntrHTML.
Другой вариант слишком монструозный и велосипедообразный ;)

Спасибо за помощь.