Question Ajouter des éléments au DOM en HTML en texte brut en utilisant uniquement du JavaScript pur (pas de jQuery)


Je dois pouvoir ajouter des éléments à une page en utilisant une chaîne de caractères HTML brute, y compris un nombre quelconque de balises, d'attributs, etc. Idéalement, je voudrais pouvoir faire quelque chose comme n'importe quelle chaîne de caractères HTML bien formée;

 var theElement = document.createElement("<h1 id='title'>Some Title</h1><span style="display:inline-block; width=100px;">Some arbitrary text</span>");

document.getElementById("body").appendChild(theElement);

De toute évidence, cela ne fonctionne pas, je cherche de bons moyens pour atteindre le même résultat. Je voudrais éviter d'analyser le HTML si possible. Je suis sévèrement limité sur les outils que je peux utiliser, sans jQuery ou en dehors et doit être compatible avec tous les navigateurs et compatible avec IE6. Toute aide serait énorme.


37
2018-04-25 05:09


origine


Réponses:


Essayez d'attribuer à la innerHTML propriété d'un élément anonyme et en ajoutant chacun de ses children.

function appendHtml(el, str) {
  var div = document.createElement('div');
  div.innerHTML = str;
  while (div.children.length > 0) {
    el.appendChild(div.children[0]);
  }
}
var html = '<h1 id="title">Some Title</h1><span style="display:inline-block; width=100px;">Some arbitrary text</span>';
appendHtml(document.body, html); // "body" has two more children - h1 and span.

58
2018-04-25 05:14



var el =  document.createElement("h1")
el.id="title";
el.innerHTML = "Some title";
document.body.appendChild(el);

var el2 =  document.createElement("span")
el2.style.display="block";
el2.style.width="100%";
el2.innerHTML = "Some arb text";
document.body.appendChild(el2);

Shoud travail (violon: http://jsfiddle.net/gWHVy/)

modifier:  Ceci est une solution pour le cas particulier que vous connaissez les propriétés des enfants directs de ce que vous voulez insérer. Jetez un oeil à la solution d'Aaron cela fonctionne dans le cas général.


10
2018-04-25 05:18



Vous pouvez obtenir l'élément élément de l'élément sous lequel vous souhaitez insérer le code HTML et utiliser innerHTML pour ajouter le code HTML.

document.getElementById("body").innerHTML = "<h1 id='title'>Some Title</h1><span>test</span>";

4
2018-04-25 05:14



La solution Maerics a tout de suite résolu mon problème. J'avais cependant besoin de le modifier rapidement pour faire ce dont j'avais besoin. J'ai plusieurs scripts et feuilles de style qui se chargent en cliquant. Je ne peux pas ajouter de scripts ou de feuilles de style comme objets réels au post-chargement du DOM. Si vous définissez innerHTML pour dire, document.body, pour contenir le <link rel="stylesheet" /> en partie, il imprimera uniquement le texte et le navigateur ne le reconnaîtra pas comme objet de lien. Pour résoudre ce problème, j'ai utilisé le code suivant.

function appendHtml(el, str) {
  var div = document.createElement('div');
  div.innerHTML = str;
  while (div.children.length > 0) {
      if ( div.children[0].tagName == 'LINK' ) {
          // Create an actual link element to append later
          style = document.createElement('link');
          style.href = div.children[0].href;
          // append your other things like rel, type, etc
          el.appendChild(style);
      }
      el.appendChild(div.children[0]);
  }
}

1
2017-08-20 18:08



Vous pouvez utiliser insertAdjacentHTML:

document.body.insertAdjacentHTML("beforeend", theHTMLToInsert);

Il y a des options autres que beforeend, mais on dirait que vous voulez ajouter à l'élément, qui est ce que beforeend Est-ce que.

Exemple Live:

document.body.insertAdjacentHTML("beforeend", "<div>This is the new content.</div>");
<div>Existing content in <code>body</code>.</div>

Contrairement à l'utilisation += avec innerHTML, cela ne nécessite pas que le navigateur fasse défiler le contenu de l'élément et crée une chaîne HTML pour le représenter, détruit ces éléments (y compris les gestionnaires d'événements dont ils disposent) et les remplace par les mêmes éléments et vos ajouts. Il ajoute simplement vos ajouts, laissant le contenu existant inchangé.


1
2017-07-19 21:46