1
votes

Tentative de déplacement d'un div mais obtention de "externalhtml n'est pas une fonction"

Je déplace beaucoup d'éléments sur une page, je n'ai pas accès au html donc je le fais avec javascript. Déplacer le innerhtml d'un div fonctionne très bien, mais si je veux le div entier pas seulement le contenu interne, je comprends que je veux probablement externalhtml. Cependant, lorsque j'utilise ceci dans mon code, j'obtiens l'erreur de console "Le HTML externe n'est pas une fonction".

Déplace très bien le code HTML interne:

function moveStuff () {
  idx('#IDX-description').after(idx('#IDX-field-extras').outerHTML()); 
  idx('#IDX-field-extras').remove();
  setTimeout(moveStuff, 1000);
}

Obtient l'erreur de console :

function moveStuff () {
  idx('#IDX-description').after(idx('#IDX-field-extras').html()); 
  idx('#IDX-field-extras').remove();
  setTimeout(moveStuff, 1000);
}

javascript jquery function outerhtml

5 commentaires

.outerhtml n'est pas une utilisation correcte, vous devez utiliser .outerHTML (notez les majuscules). Javascript est un langage sensible à la casse

Il n'y a pas de fonction jquery pour obtenir le HTML externe de l'élément. Vous devriez utiliser des js simples

il est en fait mis en majuscule dans le truc que j'utilise, toujours obtenir l'erreur. mettra à jour ma question pour être précise.

@MaheerAli Je pensais que cela n'utilisait que du javascript? sur le site, il est entouré d'une balise

3 Réponses :

0
votes

try

<div >parent
  <div id="child">child</div>
</div>

setTimeout(()=>{
  child.parentNode.removeChild(child);
},1000)

0 commentaires

3
votes

Pour convertir des objets jQuery en éléments DOM, vous devez y accéder sous forme de tableau:

idx('#IDX-description').after(idx('#IDX-field-extras')[0].outerHTML);
//                                                     ^
//                                                     |
//                note the conversion -----------------'

Notez également que contrairement au .html () de jQuery, le DOM Les API .innerHTML et .outerHTML ne sont pas des fonctions, ce ne sont que des attributs (en fait getters et setters )

1 commentaires

terrifiant! merci beaucoup, et merci pour les informations supplémentaires sur les différences entre les attributs, j'ai une meilleure idée de ce qu'il faut google maintenant -r

0
votes

Vous pouvez déplacer des éléments avec des méthodes telles que .appendChild () et .insertBefore () . La démo suivante a trois

. Chaque a un imbriqué en son sein. L'objectif est:

Déplacer l'article 3 vers la section 2 en tant que dernier enfant avec .appendChild().
Déplacer l'article 1 vers la section 2 en tant que premier enfant avec .insertBefore().

<h1>Moving Tags</h1>
<section id='s1'>
  <h2>Section 1</h2>
  <article id='a1'>
    <h3>Article 1</h3>
    <p>Content</p>
  </article>
</section>
<section id='s2'>
  <h2>Section 2</h2>
  <article id='a2'>
    <h3>Article 2</h3>
    <p>Content</p>
  </article>
</section>
<section id='s3'>
  <h2>Section 3</h2>
  <article id='a3'>
    <h3>Article 3</h3>
    <p>Content</p>
  </article>
</section>

h1,
h2,
h3 {
  border-bottom: 2px solid #000;
}

section {
  outline: 3px dashed #000;
  padding: 0 10px 10px;
}

article {
  outline: 2px solid #f00;
}

/*--Append Article 3 to Section 2---------------------*/

// Reference Article 3
var a3 = document.getElementById('a3');

// Reference Section 2
var s2 = document.getElementById('s2');

// Append Article 3 to Section 2 as the last child
s2.appendChild(a3);

/*--Insert Article 1 Before Article 2----------------*/

// Reference Article 1
var a1 = document.getElementById('a1');

// Reference Article 2
var a2 = document.getElementById('a2');

// Move Article 1 to Section 2 as the first child
s2.insertBefore(a1, a2)

0 commentaires