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

Question

Я собираюсь создать элемент xml в javascript для обмена данными со стороной сервера. Я нашел, что могу сделать это с помощью document.createElement.But, я не знаю, как преобразовать его в строку. Есть ли в браузере API для упрощения? Или есть ли js lib, использующий этот API?

Заранее спасибо.

// Модификация

Я обнаружил, что браузер API XMLSerializer, он должен быть правильно сериализовать в строку.

Answer 1

Вы можете получить 'внешнего HTML' клонирования элемента, добавив его в пустой, 'за сценой' контейнер, и считывание внутреннего HTTML контейнера.

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

Вызов 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; 
} 

Answer 2

Там в 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); 

Смотрите также How to iterate through all attributes in an HTML element? (я!)

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

alert(element.innerHTML); 

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

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

Answer 3

Элемент outerHTML свойство (примечание: supported by Firefox after version 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. outerHTML - Javascript Property
2. Javascript Reference - Elements

Answer 4

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

Answer 5

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

Это просто :)