Jak przekonwertować element HTMLElement na ciąg

Question 1

Mam zamiar stworzyć element XML w JavaScript do wymiany danych po stronie serwera. Odkryłem, że mogę to zrobić document.createElement. Ale nie wiem, jak przekonwertować go na ciąg. Czy w przeglądarce jest jakieś API, aby to ułatwić? Czy jest jakaś biblioteka JS zawierająca to API?

EDYCJA: Odkryłem, że interfejs API przeglądarki XMLSerializer powinien być właściwym sposobem serializacji do ciągu.

Question 2

Możesz uzyskać „zewnętrzny-html”, klonując element, dodając go do pustego kontenera „poza sceną” i odczytując wewnętrzny kod HTML kontenera.

Ten przykład przyjmuje opcjonalny drugi parametr.

Wywołaj document.getHTML (element, true), aby uwzględnić elementy potomne elementu.

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

Właściwość element outerHTML(uwaga: obsługiwana przez przeglądarkę Firefox po wersji 11 ) zwraca kod HTML całego elementu.

Przykład

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

Podobnie możesz użyć innerHTMLdo pobrania kodu HTML zawartego w danym elemencie lub innerTextdo pobrania tekstu wewnątrz elementu (bez znaczników HTML).

Zobacz też

Question 4

Najłatwiejszym sposobem jest skopiowanie innerHTML tego elementu do zmiennej tmp i uczynienie jej pustą, a następnie dodanie nowego elementu, a następnie skopiowanie z powrotem do niego zmiennej tmp. Oto przykład, którego użyłem, aby dodać skrypt jquery na czubku głowy.

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;

Tak prosty :)

Question 5

Jest tagNamenieruchomość, a także attributesnieruchomość:

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

Zobacz także Jak iterować przez wszystkie atrybuty w elemencie HTML? (Zrobiłem!)

Aby uzyskać zawartość między tagami open i close, prawdopodobnie innerHTMLmożesz użyć, jeśli nie chcesz iterować wszystkich elementów podrzędnych ...

alert(element.innerHTML);

... a następnie ponownie uzyskaj znacznik zamknięcia za pomocą tagName.

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

Question 6

Może to nie dotyczyć wszystkich przypadków, ale podczas wyodrębniania z XML miałem ten problem, który rozwiązałem.

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

następnie pobierz xml:

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

Następnie wykonałem tę funkcję, aby wyodrębnić linię xml, gdy muszę odczytać z pliku XML, zawierającego tagi html.

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

a teraz na zakończenie:

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

Używałem Angulara, potrzebowałem tego samego i wylądowałem na tym stanowisku.

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

Question 8

Załóżmy, że twój element jest cały [object HTMLDocument]. Możesz przekonwertować go na String w ten sposób:

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

Rozwiń fragment

Answer 1

84

Mam zamiar stworzyć element XML w JavaScript do wymiany danych po stronie serwera. Odkryłem, że mogę to zrobić document.createElement. Ale nie wiem, jak przekonwertować go na ciąg. Czy w przeglądarce jest jakieś API, aby to ułatwić? Czy jest jakaś biblioteka JS zawierająca to API?

EDYCJA: Odkryłem, że interfejs API przeglądarki XMLSerializer powinien być właściwym sposobem serializacji do ciągu.

javascript html xiao 啸
źródło

możliwy duplikat tworzenia nowego elementu DOM z łańcucha HTML przy użyciu wbudowanych metod DOM lub prototypu

T.Todua

Answer 2

możliwy duplikat tworzenia nowego elementu DOM z łańcucha HTML przy użyciu wbudowanych metod DOM lub prototypu

T.Todua

Answer 3

Możesz uzyskać „zewnętrzny-html”, klonując element, dodając go do pustego kontenera „poza sceną” i odczytując wewnętrzny kod HTML kontenera.

Ten przykład przyjmuje opcjonalny drugi parametr.

Wywołaj document.getHTML (element, true), aby uwzględnić elementy potomne elementu.

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 4

1

Możesz także zadzwonić bezpośrednio domElement.outerHTML( w3schools.com/jsref/prop_html_outerhtml.asp )

user007

Answer 5

148

Właściwość element outerHTML(uwaga: obsługiwana przez przeglądarkę Firefox po wersji 11 ) zwraca kod HTML całego elementu.

Przykład

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

Podobnie możesz użyć innerHTMLdo pobrania kodu HTML zawartego w danym elemencie lub innerTextdo pobrania tekstu wewnątrz elementu (bez znaczników HTML).

Zobacz też

gpmcadam
źródło

Ale wygląda na to, że nie mogę uzyskać tekstu wewnętrznego z właściwością externalHTML. Myślę, że to, czego naprawdę chcę, to znaczniki HTML.

xiao 啸

3

externalHTML jest obsługiwany w FF od v11 developer.mozilla.org/en-US/docs/Web/API/element.outerHTML

llamerr

externalHTML jest obsługiwany w prawie wszystkich nowoczesnych przeglądarkach: caniuse.com/#feat=mdn-api_element_outerhtml

Williams A.

Answer 6

Ale wygląda na to, że nie mogę uzyskać tekstu wewnętrznego z właściwością externalHTML. Myślę, że to, czego naprawdę chcę, to znaczniki HTML.

xiao 啸

Answer 7

3

externalHTML jest obsługiwany w FF od v11 developer.mozilla.org/en-US/docs/Web/API/element.outerHTML

llamerr

Answer 8

externalHTML jest obsługiwany w prawie wszystkich nowoczesnych przeglądarkach: caniuse.com/#feat=mdn-api_element_outerhtml

Williams A.

Answer 9

Najłatwiejszym sposobem jest skopiowanie innerHTML tego elementu do zmiennej tmp i uczynienie jej pustą, a następnie dodanie nowego elementu, a następnie skopiowanie z powrotem do niego zmiennej tmp. Oto przykład, którego użyłem, aby dodać skrypt jquery na czubku głowy.

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;

Tak prosty :)

Answer 10

0

Jest tagNamenieruchomość, a także attributesnieruchomość:

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

Zobacz także Jak iterować przez wszystkie atrybuty w elemencie HTML? (Zrobiłem!)

Aby uzyskać zawartość między tagami open i close, prawdopodobnie innerHTMLmożesz użyć, jeśli nie chcesz iterować wszystkich elementów podrzędnych ...

alert(element.innerHTML);

... a następnie ponownie uzyskaj znacznik zamknięcia za pomocą tagName.

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

Richard JP Le Guen
źródło

Obawiam się, że czasami trzeba napisać kod, który pobiera cały kod.

xiao 啸

Jeśli jego XML powinien znajdować się w jednym węźle głównym, tak? Jeśli tak, to musisz to zrobić tylko dla węzła głównego - innerHTML jest obsługiwany we wszystkich głównych przeglądarkach i da ci X (H) TML zagnieżdżony w węźle głównym. (czyli wszystko!)

Richard JP Le Guen

1

Po co zawracać sobie głowę zapętleniem atrybutów elementu i budowaniem z niego ciągu „tagu”? Po prostu zawiń element w INNY element i weź wewnętrzny kod HTML tego nowego elementu nadrzędnego. Voila, natychmiastowe obejście zewnętrznego HTML.

Marc B

Answer 11

Obawiam się, że czasami trzeba napisać kod, który pobiera cały kod.

xiao 啸

Answer 12

Jeśli jego XML powinien znajdować się w jednym węźle głównym, tak? Jeśli tak, to musisz to zrobić tylko dla węzła głównego - innerHTML jest obsługiwany we wszystkich głównych przeglądarkach i da ci X (H) TML zagnieżdżony w węźle głównym. (czyli wszystko!)

Richard JP Le Guen

Answer 13

1

Po co zawracać sobie głowę zapętleniem atrybutów elementu i budowaniem z niego ciągu „tagu”? Po prostu zawiń element w INNY element i weź wewnętrzny kod HTML tego nowego elementu nadrzędnego. Voila, natychmiastowe obejście zewnętrznego HTML.

Marc B

Answer 14

Może to nie dotyczyć wszystkich przypadków, ale podczas wyodrębniania z XML miałem ten problem, który rozwiązałem.

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

następnie pobierz xml:

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

Następnie wykonałem tę funkcję, aby wyodrębnić linię xml, gdy muszę odczytać z pliku XML, zawierającego tagi html.

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

a teraz na zakończenie:

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

Answer 15

0

Używałem Angulara, potrzebowałem tego samego i wylądowałem na tym stanowisku.

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

Jnr
źródło

Answer 16

Załóżmy, że twój element jest cały [object HTMLDocument]. Możesz przekonwertować go na String w ten sposób:

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

Rozwiń fragment

Jak przekonwertować element HTMLElement na ciąg

Odpowiedzi:

Przykład

Zobacz też