Создать строку из HTMLDivElement

Question

То, что я хотел бы сделать, - это создать строку из объекта Javascript HTMLElement. Например:

var day = document.createElement("div");
day.className = "day";
day.textContent = "Random Text";

Теперь у нас есть объект day HTMLDivElement. Можно ли сделать так, чтобы он печатался как строка? например,

<div class="day">Random Text</div>

Answer 1

Вариант для оболочки Gump, так как его реализация выводит целевой узел из документа.

function nodeToString ( node ) {
   var tmpNode = document.createElement( "div" );
   tmpNode.appendChild( node.cloneNode( true ) );
   var str = tmpNode.innerHTML;
   tmpNode = node = null; // prevent memory leaks in IE
   return str;
}

Чтобы напечатать полученную строку на экране (re: escaped)

var escapedStr = nodeToString( node ).replace( "<" , "&lt;" ).replace( ">" , "&gt;");
outputNode.innerHTML += escapedStr;

Обратите внимание, что такие атрибуты, как "class", "id" и т. Д., Будучи должным образом структурированными, сомнительны.

Answer 2

Вы можете использовать эту функцию (взято из pure.js)

function outerHTML(node){
 return node.outerHTML || new XMLSerializer().serializeToString(node);
}

Answer 3

Вы можете заключить этот элемент в другой элемент и использовать innerHTML на нем:

var wrapper = document.createElement("div");
wrapper.appendChild(day);
var str = wrapper.innerHTML;

Answer 4

Прошло несколько лет с тех пор, как последние ответы показали, что .outerHTML теперь поддерживается всеми основными браузерами (см .: https://caniuse.com/#search=outerhtml).). Итак, чтобы получить HTML-код элемента JS, вывыполните следующие действия:

var day = document.createElement("div");
day.className = "day";
day.textContent = "Random Text";

console.log(day.outerHTML)

Что дает вам: <div class="day">Random Text</div>

Answer 5

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

var day = document.createElement("div");
day.className = "day";
// create text node
var txt = document.createTextNode('Random Text');
// add text to div now
day.appendChild(txt);
// append to body
document.body.appendChild(day);

Answer 6

Зачем вам использовать createElement, если вы также можете напрямую анализировать строку?Нравится: var string = '<div class="' + class + '">' + text + '</div>';