Як перетворити елемент HTMLE в рядок

Question 1

Я збираюся створити XML-елемент у JavaScript для обміну даними з боку сервера. Я виявив, що можу це зробити document.createElement. Але я не знаю, як перетворити його на рядок. Чи існує API у браузері, щоб полегшити його? Або існує якась бібліотека JS, включаючи цей API?

EDIT: Я виявив, що браузер API API XMLSerializer повинен бути правильним способом серіалізації до рядка.

Question 2

Ви можете отримати 'external-html', клонуючи елемент, додаючи його в порожній контейнер 'поза сценою' та читаючи внутрішнійHTML контейнера.

Цей приклад бере необов’язковий другий параметр.

Викличте document.getHTML (елемент, істина), щоб включити нащадків елемента.

document.getHTML= function(who, deep){
    if(!who || !who.tagName) return '';
    var txt, ax, el= document.createElement("div");
    el.appendChild(who.cloneNode(false));
    txt= el.innerHTML;
    if(deep){
        ax= txt.indexOf('>')+1;
        txt= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);
    }
    el= null;
    return txt;
}

Question 3

outerHTMLВластивість елемента (примітка: підтримується Firefox після версії 11 ) повертає HTML всього елемента.

Приклад

<div id="new-element-1">Hello world.</div>

<script type="text/javascript"><!--

var element = document.getElementById("new-element-1");
var elementHtml = element.outerHTML;
// <div id="new-element-1">Hello world.</div>

--></script>

Подібним чином, ви можете використовувати, innerHTMLщоб отримати HTML, що міститься в даному елементі, або innerTextщоб отримати текст всередині елемента (без розмітки HTML).

Дивіться також

Question 4

Найпростіший спосіб - скопіювати innerHTML цього елемента до змінної tmp і зробити його порожнім, потім додати новий елемент, а після цього скопіювати до нього змінну tmp. Ось приклад, який я використовував для додавання скрипта jquery вгорі.

var imported = document.createElement('script');
imported.src = 'http://code.jquery.com/jquery-1.7.1.js';
var tmpHead = document.head.innerHTML;
document.head.innerHTML = "";
document.head.append(imported);
document.head.innerHTML += tmpHead;

Це просто :)

Question 5

Є tagNameвластивість, і attributesвластивість також:

var element = document.getElementById("wtv");
var openTag = "<"+element.tagName;
for (var i = 0; i < element.attributes.length; i++) {
    var attrib = element.attributes[i];
    openTag += " "+attrib.name + "=" + attrib.value;
}
openTag += ">";
alert(openTag);

Див. Також Як переглядати всі атрибути елемента HTML? (Я зробив!)

Щоб отримати вміст між тегами open і close, ви могли б скористатися, innerHTMLякщо не хочете перебирати всі дочірні елементи ...

alert(element.innerHTML);

... а потім знову отримайте тег close tagName.

var closeTag = "</"+element.tagName+">";
alert(closeTag);

Question 6

Це може стосуватися не всіх випадків, але при витягуванні з xml у мене була ця проблема, яку я вирішив за допомогою цього.

function grab_xml(what){
var return_xml =null;
    $.ajax({
                type: "GET",
                url: what,
                success:function(xml){return_xml =xml;},
        async:   false
        });
return(return_xml);
}

тоді отримаємо xml:

var sector_xml=grab_xml("p/sector.xml");
var tt=$(sector_xml).find("pt");

Потім я зробив цю функцію для вилучення рядка xml, коли мені потрібно прочитати з XML-файлу, що містить теги html.

    function extract_xml_line(who){
    var tmp = document.createElement("div");
    tmp.appendChild(who[0]);
    var tmp=$(tmp.innerHTML).html();
    return(tmp);
}

а тепер зробимо висновок:

var str_of_html= extract_xml_line(tt.find("intro")); //outputs the intro tag and whats inside it: helllo  <b>in bold</b>

Question 7

Я використовував Angular, і мені потрібно було те саме, і потрапив на цей пост.

@ViewChild('myHTML', {static: false}) _html: ElementRef;
this._html.nativeElement;

Question 8

Припустимо, ваш елемент цілий [object HTMLDocument]. Ви можете перетворити його на рядок таким чином:

const htmlTemplate = `<!DOCTYPE html><html lang="en"><head></head><body></body></html>`;

const domparser = new DOMParser();
const doc = domparser.parseFromString(htmlTemplate, "text/html"); // [object HTMLDocument]

const doctype = '<!DOCTYPE html>';
const html = doc.documentElement.outerHTML;

console.log(doctype + html);

Розгорніть фрагмент