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

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

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

//модификации

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

5 58
javascript html

5 ответов:

вы можете получить "внешний html" путем клонирования элемента, добавление его в пустой, "за кулисами" контейнер, и значение innerHTML будет в контейнере.

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

документ назвать.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;
}
33

элемент 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. свойство outerHTML-Javascript
  2. Ссылка На Javascript - Элементы
91

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

так просто :)

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);

см. также как перебирать все атрибуты в HTML-элементе? (Я сделал!)

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

alert(element.innerHTML);

... а потом снова закрыть тег tagName.

var closeTag = "</"+element.tagName+">";
alert(closeTag);
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