Y a-t-il un moyen de convertir la chaîne de balisage en objet nœud dans JavaScript? En fait, je cherche le sous-titre pour: quelque chose comme Utilisation de CreateNodeFromstring Plutôt créant l'élément de table puis appendez ensuite ses éléments d'enfant puis Joignez leurs attributs et valeurs respectifs!
4 Réponses :
Il n'y a pas une fonction de navigateur croisée existante pour cela. La méthode suivante peut être utilisée pour atteindre l'effet souhaité (à l'aide d'un Documentfragment code> pour une performance optimisée, basée sur Cette réponse a >): appendStringAsNodes(
document.getElementById("divOne"),
"<table><tbody><tr><td><input type='text' value='0' /></td></tr></tbody></table>"
);
Oui, vous pouvez le faire.
var myNewTable = document.createElement("table");
myNewTable.innerHTML = "<tbody><tr><td><input type='text' value='0' /></td></tr></tbody>"
document.getElementById("divOne").appendChild(myNewTable);
Les versions plus anciennes IE vont se plaindre de cela, car elles ne peuvent pas gérer la configuration de la propriété
Ah, vient de voir votre message maintenant, désolé de l'ajouter moi-même, j'ai essayé d'être un peu plus détaillé si ... BTW Vous pouvez ajouter la langue du code (pour le formater) en ajoutant le nom de la langue après le 3 backtiks Quelques nouvelles sur ce sujet: L'approche moderne consiste à utiliser la balise C'est une standardisation de la templature du côté client et n'a pas besoin d'utiliser .innerhtml, qui pourrait conduire à des problèmes de sécurité (XSS) P> Exemple: P>
Nice et efficace, merci! Caniuse.com/?Search=%3ctemplate%3e suggère que nous devrions simplement l'utiliser en ce jour et âge.
Aussi agréable à consulter: WebComponents: développeur.mozilla.org/en-us/ DOCS / Web / Web_Components ( innerhtml sur certains éléments, y compris . Voir aussi Cet article .
0
votes
function htmlMarkupToNode(html){
let template = document.createElement("template");
template.innerHTML = html ;
let node = template.content.cloneNode(true) ;
return node ;
}
document.getElementById("divOne").appendChild(htmlMarkupToNode("<table><tbody><tr><td><input type='text' value='0' /></td></tr></tbody></table>"));
1 commentaires
1
votes
code> que vous placez par ex. Avant que le corps se ferme (le navigateur l'ignore). p> // .content will grab the content of the template, not the <template> tag
// this will return a document fragment
const $articleFragment = document.querySelector('#tplArticle').content;
// clone it, otherwise you get the same reference and it won't be reusable (true makes a deep copy)
const $article = document.importNode($articleFragment, true);
// then e.g. append it to the body
document.body.appendChild($article);
2 commentaires
Je suis curieux, pourquoi régler InnerhTML ne fonctionne pas pour vous. Après avoir défini innerhtml, vous pouvez obtenir l'élément résultant en interrogeant votre divone.
@akonsu, soi-disant que vous avez
Dites-vous que si vous avez un champ de saisie de texte et un bouton, la valeur du champ d'entrée est effacée lorsque vous appuyez sur le bouton? Pourriez-vous démontrer cela, dites, jsbin.com?
Avez-vous envisagé d'utiliser un cadre tel que JQuery? Fait ce genre de tâche beaucoup plus facile ...
Essayez-le dans FF10 ou IE9 avec une compatibilité native, puis dans le mode de compatibilité IE8: JSBIN.com/amodag aussi, < CODE> DOCUMENT.GETTELEMENTBYID ("DIVONE"). APPENDSCHILD (DOCUMENT.CREATRE EELEMENT ("INPUT")) conserve la valeur de l'entrée dans IE9 mais j'ai besoin d'ajouter toute la table dans une seule déclaration.
Pas besoin d'une bibliothèque comme JQuery. Ce type de tâche est assez facile sans.
Ce comportement est parce que
innerhtml + = 'foo' est d'abord obtenuinnerhtml , puis le réglez sur cette valeur +'foo' . Parce queinnerhtml ne contient pas la valeur actuelle (ainsi que les gestionnaires d'événements et tout ce qui n'est pas visible dans le HTML), tous les éléments correspondants sont reconstruits de la même manière que la première fois qu'ils ont été analysés (donc, en utilisant la valeur par défaut).@akonsu De nombreux éléments (interactifs) ont un attribut et une propriété. L'attribut est la valeur par défaut et spécifiée dans le HTML. La propriété est dynamique et reflète l'état actuel. Lorsque
.innerhtml est utilisé, seuls les attributs sont retournés, pas les propriétés. C'est la cause des champs d'entrée: la valeurla valeur est peut-être une chaîne vide et la valeurpropriété n'est pas obtenu via.innerhtml .