Как преобразовать HTMLElement в строку

84

Я собираюсь создать элемент XML в JavaScript для обмена данными со стороной сервера. Я обнаружил, что могу это сделать document.createElement. Но я не знаю, как преобразовать его в строку. Есть ли в браузере какой-нибудь API, чтобы упростить задачу? Или есть какая-нибудь библиотека JS, включающая этот API?

РЕДАКТИРОВАТЬ: Я обнаружил, что API браузера XMLSerializer должен быть правильным способом сериализации в строку.

javascript html сяо 啸
источник
возможный дубликат создания нового элемента DOM из строки HTML с использованием встроенных методов DOM или прототипа
T.Todua

Ответы:

39

Вы можете получить «внешний html», клонировав элемент, добавив его в пустой контейнер «вне сцены» и прочитав внутренний HTML-код контейнера.

В этом примере необязательный второй параметр.

Вызовите document.getHTML (element, true), чтобы включить потомков элемента.

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;
}
Kennebec
источник
1
Вы также можете напрямую позвонить domElement.outerHTML( w3schools.com/jsref/prop_html_outerhtml.asp )
user007
148

Свойство element 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).

Смотрите также

  1. externalHTML - Свойство Javascript
  2. Справочник по Javascript - Элементы
gpmcadam
источник
Но, похоже, я не могу получить внутренний текст с помощью свойства outerHTML. Я думаю, что мне действительно нужна разметка HTML.
xiao 啸
3
externalHTML поддерживается в FF из v11 developer.mozilla.org/en-US/docs/Web/API/element.outerHTML
llamerr
externalHTML поддерживается практически во всех современных браузерах: caniuse.com/#feat=mdn-api_element_outerhtml
Williams A.
1

Самый простой способ сделать это - скопировать 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;

Так просто :)

Навид Шейх
источник
0

Есть 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);

... а затем снова получить закрывающий тег с помощью tagName.

var closeTag = "</"+element.tagName+">";
alert(closeTag);
Ричард Дж. П. Ле Гуен
источник
Боюсь, что иногда нужно написать код, который получает всю разметку.
xiao 啸
Если его XML, все должно быть в одном корневом узле, да? Если это так, то вам нужно сделать это только для корневого узла - innerHTML поддерживается всеми основными браузерами и предоставит вам X (H) TML, вложенный в корневой узел. (то есть все!)
Ричард Джей Пи Ле Гуэн,
1
Зачем перебирать атрибуты элемента и строить из него строковый «тег»? Просто оберните элемент в ДРУГОЙ элемент и возьмите innerHTML этого нового родительского элемента. Вуаля, мгновенное решение для externalHTML.
Marc B
0

Это может не относиться ко всем случаям, но при извлечении из 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>
Мигель
источник
0

Я использовал Angular, мне нужно было то же самое, и я попал на этот пост.

@ViewChild('myHTML', {static: false}) _html: ElementRef;
this._html.nativeElement;
Младший
источник
0

Предположим, ваш элемент цел [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);
Развернуть фрагмент

Topvova
источник