Comment convertir un HTMLElement en une chaîne

Question

Je vais créer un élément xml en javascript pour échanger des données avec le serveur. J'ai trouvé que je peux le faire avec document.createElement.But je ne sais pas comment le convertir en chaîne. Y a-t-il une API dans le navigateur pour le rendre plus facile? Ou y a-t-il une librairie js incudiant cette API?

Merci d'avance.

// Modification

Je trouve que le navigateur API XMLSerializer, il devrait être la bonne façon de sérialisation à chaîne.

Answer 1

Vous pouvez obtenir le 'externe-html' par clonage de l'élément, ajoutant à un vide, contenant 'hors de la scène', et en lisant innerHTML du conteneur.

Cet exemple prend un deuxième paramètre facultatif.

Appelez document.getHTML (élément, true) pour inclure les descendants de l'élément.

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

Il y a une propriété tagName, et une propriété attributes ainsi:

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

Voir aussi How to iterate through all attributes in an HTML element? (moi!)

Pour obtenir le contenu entre les balises d'ouverture et de fermeture, vous pouvez probablement utiliser innerHTML si vous ne voulez pas parcourir tous les éléments enfants ...

alert(element.innerHTML); 

... et puis obtenez à nouveau l'étiquette close avec tagName.

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

Answer 3

L'élément outerHTML propriété (note: supported by Firefox after version 11) renvoie le code HTML de l'élément entier.

Exemple

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

De même, vous pouvez utiliser innerHTML pour obtenir le code HTML contenu dans un élément donné, ou innerText pour obtenir le texte à l'intérieur d'un élément (de balisage sans HTML).

Voir aussi

1. outerHTML - Javascript Property
2. Javascript Reference - Elements

Answer 4

Cela pourrait ne pas appliquer à tout le monde de cas, mais lors de l'extraction de xml i eu ce problème, que je résolus avec cela.

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

alors obtenir le xml:

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

Ensuite J'ai ensuite fait cette fonction pour extraire la ligne xml, quand j'ai besoin de lire à partir d'un fichier XML contenant des balises HTML.

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

et maintenant de conclure:

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

La façon la plus facile à faire est de copier innerHTML de cet élément à la variable et faire tmp vide, puis ajouter de nouveaux éléments, et après que copie de sauvegarde tmp variable à cela. Voici un exemple que j'ai utilisé pour ajouter le script jquery au sommet de la tête.

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; 

Aussi simple que ça :)