Как преобразовать HTMLElement в строку
Я собираюсь создать элемент XML в JavaScript для обмена данными со стороной сервера. Я обнаружил, что могу сделать это с document.createElement
. Но я не знаю, как преобразовать его в строку. Есть ли API в браузере, чтобы было проще? Или есть какая-нибудь библиотека JS, включая этот API?
РЕДАКТИРОВАТЬ: я обнаружил, что браузер API XMLSerializer, это должен быть правильный способ сериализации в строку.
Ответы
Ответ 1
Вы можете получить "внешний-html", клонировав элемент,
добавив его в пустой контейнер "offstage",
и чтение контейнера innerHTML.
В этом примере используется необязательный второй параметр.
Вызовите 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;
}
Ответ 2
Элемент 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).
См. также
Ответ 3
Самый простой способ сделать это: скопировать innerHTML этого элемента в переменную tmp и сделать ее пустой, затем добавить новый элемент и после этого скопировать обратно переменную tmp в нее.
Вот пример, который я использовал для добавления jquery script в начало страницы.
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;
Это просто:)
Ответ 4
Здесь есть свойство 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);
Ответ 5
Это может не относиться ко всем случаям, но при извлечении из 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>
Ответ 6
sir @gpmcadam был действительно прав. Я попробовал внешнийHTML, и он приносит строку всего html. Работает 100%