Remplacer un élément HTML avec un certain HTML contenu dans une chaîne

Question

Disons que j'ai cette partie du document HTML:

<div>hello world <span id="test"></span></div> 

En JavaScript droite, je dois remplacer le span avec un contenu HTML contenu dans une chaîne comme '<span>other</span> yo <a href="www.google.ca">google</a>'

Ainsi, le résultat final sera comme:

<div>hello world <span>other</span> yo <a href="www.google.ca">google</a></div> 

le problème que je suis FACI ng est que la chaîne HTML peut contenir n'importe quel nombre de balises à sa "racine". Ce n'est donc pas un remplacement de 1 à 1 des étiquettes.

Je dois le faire en JavaScript (pas de jQuery).

Si quelqu'un peut vous aider!

Merci

Answer 1

Quelle est la raison pour laquelle vous ne pouvez pas régler le innerHTML de <span id="test">? Il n'y a aucun mal à avoir l'envergure supplémentaire ...

Si vous avez vraiment besoin d'enlever la portée extérieure, vous pouvez juste insérer tous les childNodes avant lui.

var html = '<span>other</span> yo <a href="www.google.ca">google</a>'; 

var removeMe = document.getElementById('test'); 
removeMe.innerHTML = html; 

var child; 
while(child = removeMe.childNodes[0]) { 
    removeMe.parentNode.insertBefore(child, removeMe); 
} 

removeMe.parentNode.removeChild(removeMe); 

Voir http://jsfiddle.net/4tLVC/1/

Answer 2

ne peuvent pas vous utiliser

var span = document.getElement...('test') 
div.getElementById('yourDiv').removeChild(span) 

ou vous pouvez réellement faire

span.parentNode.removeChild(span) 

cela devrait fonctionner à. Après que

div.innerHTML += 'your cool <span>content></span>'