1
votes

Comment puis-je ajouter du code HTML à l'aide de JavaScript?

J'essaye d'ajouter un élément au DOM en utilisant JavaScript. J'ai un ul et je souhaite ajouter un li . Ce n'est pas difficile d'utiliser appendChild mais je veux que mon li soit plus compliqué.

Voici le résultat que j'essaie d'obtenir:

let author = "me";
let message = "Message...";
let time = "15:21";

<li>
  <span class="author">Me</span>
  <span class="message">Message...</span>
  <span class="time">
    <div class="line"></div>
    15:21
  </span>
</li>

Comme vous pouvez le voir, ce que j'essaie d'accomplir n'est pas Ce n'est pas juste un li de base avec du texte (innerHTML) mais une assez grande partie de code HTML.

Ma question est de savoir comment je peux obtenir cette sortie en utilisant JavaScript. Ou devrais-je utiliser une bibliothèque JavaScript ou quelque chose pour le rendre plus facile?

javascript html appendchild

8 commentaires

Veuillez poster votre tentative. Si vous cliquez sur modifier puis sur [<>] éditeur d'extraits de code, vous pouvez nous donner un exemple reproductible minimal < / a>

Quel est le problème avec .appendChild () ? Construisez le

avec tous ses éléments enfants, puis ajoutez simplement le

Mais en fin de compte, il s'agit toujours d'un balisage invalide. Un

n'est pas un enfant valide d'un

pourquoi mettriez-vous un

dans un ?? un span est un élément en ligne, tandis qu'un div est un élément de bloc. c'est un mauvais code

@Andreas Je suis encore un développeur junior et je me demandais s'il y avait une meilleure solution à mon problème. Comme JSX dans React pour que je puisse écrire du HTML dans javascript. Et merci de m'avoir parlé du .

div est un enfant parfaitement valide dans un intervalle, à condition que sa propriété CSS display ait été définie sur inline .

La plus grande question est: pourquoi OP utilise-t-il un

comme élément de présentation (déduit de son nom de classe) au lieu de CSS?

avez-vous vu ma réponse? (avec DOMParser)

5 Réponses :

2
votes

Jetez un œil à ce lien d'origine pour ce code où nous ajoutons au DOM. Ensuite, vous pouvez utiliser l'interpolation de chaîne pour ajouter les variables au code comme ci-dessous

function appendHtml(el, str) {
  var div = document.createElement('div'); //container to append to
  div.innerHTML = str;
  while (div.children.length > 0) {
    el.appendChild(div.children[0]);
  }
}

let author = "me";
let message = "Message...";
let time = "15:21";

var html = `<li><span class="author">${author}</span><span class="message">${message}</span><span class="time"><div class="line"></div>${time}</span></li>`;
appendHtml(document.body, html);

6 commentaires

Merci c'est exactement ce que je cherchais.

Cependant, il produit du HTML non valide, car un élément

n'a qu'un

@MichalK Alors .appendChild () est la solution? Vous avez également déjà mentionné .innerHTML . Donc, les deux étapes que cette «réponse» utilise pour résoudre votre problème. Comment cela peut-il être la réponse? o.O

@Andreas je pense que op cherchait une interpolation de chaîne

@DavidsaysreinstateMonica Eh bien, ce n'est pas pertinent, n'est-ce pas? J'ai juste pris ce que l'op de sortie voulait et l'a appliqué

Non, je ne pense pas que ce soit le cas. Le but du site est de rendre Internet un meilleur endroit et d'apprendre à mieux faire les choses. Créer du HTML invalide - sans même signaler ce problème dans la réponse - semble être une mauvaise pratique. Mais c’est votre réponse, et vous avez absolument le droit de ne pas être d’accord avec moi.

2
votes

Si vous souhaitez insérer une chaîne d'éléments html en tant que nœud html, vous devez créer des éléments html à utiliser avec appendChild()

Cependant, insertAdjacentHTML () vous permet pour ajouter des éléments html s'ils sont passés sous forme de chaîne. https://developer.mozilla.org/en-US/ docs / Web / API / Element / insertAdjacentHTML

<ul id='list'></ul>

let html = `<li>
  <span class="author">Me</span>
  <span class="message">Message...</span>
  <span class="time">
    <div class="line"></div>
    15:21
  </span>
</li>`;
document.querySelector('#list').insertAdjacentHTML('beforeend', html);

<ul id='nav'><ul>

let author = "me";
let message = "Message...";
let time = "15:21";
let str = `<li><span class="author">${author}</span><span class="message">${message}</span><span class="time"><div class="line"></div>${time}</span></li>`;
document.querySelector('#nav').insertAdjacentHTML('beforeend', str);

2 commentaires

Dans votre deuxième exemple, il est inutile d'utiliser un modèle littéral.

@Andy J'ai utilisé un modèle littéral pour gérer les nouveaux sauts de ligne / ligne.

1
votes

Vous pouvez utiliser un littéral de modèle et insertAdjacentHTML pour un approche propre.

<ul>
  <li>Current</li>
</ul>

.line { display: inline };

function createListItem({ author, message, time }) {
  return `<li>
    <span class="author">${author}</span>
    <span class="message">${message}</span>
    <span class="time">
      <div class="line"></div>
      ${time}
    </span>
  </li>`;
}

const ul = document.querySelector('ul');

ul.insertAdjacentHTML('beforeend', createListItem({
  author: 'me',
  message: 'Message...',
  time: '15:21'
}));

0 commentaires

0
votes

le plus simple, (pour moi)

<ul id="myList"></ul>

const DomParser = new DOMParser()

function makeLI( author, message, time)
  {
  let ElemLI =
    `<li>
      <span class="author">${author}</span>
      <span class="message">${message}</span>
      <span class="time">
        <div class="line"></div>
        ${time}
      </span>
    </li>`
  return (DomParser.parseFromString( ElemLI, 'text/html')).body.firstChild
  }


// proof...
myList.appendChild(makeLI('you','Message...','15:21'))
myList.appendChild(makeLI('me','someone in ?','21:25'))

0 commentaires

0
votes

Voici une petite astuce que vous pouvez utiliser.

Vous pouvez en fait utiliser le DOM existant (HTML) comme une sorte de modèle, en gros cloner l'élément, puis remplacer les parties par les valeurs souhaitées.

Tout d'abord, vous supprimez l'élément du DOM avec la suppression, bien que l'élément ait été supprimé du DOM, cela ne vous empêche pas de le cloner.

Maintenant, chaque fois que vous en voulez un autre, appelez clone (true) , true = deepClone et l'utilisation de querySelector remplacent des parties du DOM par les bits que vous voulez. Enfin, ajoutez cet élément cloné au DOM.

Voici un exemple simple.

<ol>
  <li>
    <span class="author">Me</span>
    <span class="message">Message...</span>
    <span class="time">
      <div class="line"></div>
      15:21
    </span>
  </li>
</ol>

.author {
  font-weight: bold;
  margin-right: 1rem;
}
.time {
  color: green;
}
li {
  margin: 0.5rem;
  border: 1px solid silver;
}
.line {
  border-bottom: 1px dotted red;
}

const ol = document.querySelector('ol');
const template = document.querySelector('li');
template.remove();

function append(o) {
  const {author, message, time} = o;
  const clone = template.cloneNode(true);
  clone.querySelector('.author').innerText=author;
  clone.querySelector('.message').innerText=message;
  clone.querySelector('.time').lastChild.nodeValue=time;
  ol.appendChild(clone); 
}

append({
  author: "me",
  message: "Message...",
  time: "15:21"
});

append({
  author: "Another me",
  message: "Something else..",
  time: "12:42"
});

append({
  author: "Whatever",
  message: "lalala..",
  time: "17:20"
});

0 commentaires