Попытка переместить div, но получить "externalhtml - это не функция" - PullRequest
Новая
       64

Попытка переместить div, но получить "externalhtml - это не функция"

1 голос
/ 21 мая 2019

Я перемещаю множество элементов по странице, у меня нет доступа к html, поэтому я делаю это с помощью JavaScript.Перемещение innerhtml div работает нормально, но если я хочу весь div, а не только его внутреннее содержимое, я понимаю, что, вероятно, мне нужен externalhtml.Однако, когда я использую это в своем коде, я получаю консольную ошибку «externalHTML не является функцией».

Перемещает внутренний html очень хорошо: 

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

Получает ошибку консоли: 

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

Ответы [ 3 ]

3 голосов
/ 21 мая 2019

Чтобы преобразовать объекты jQuery в элементы DOM, вам необходимо получить к нему доступ в виде массива: 

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

Также обратите внимание, что в отличие от .html() jQuery API DOM .innerHTML и .outerHTML не являютсяфункции, это просто атрибуты (на самом деле геттеры и сеттеры )

0 голосов
/ 21 мая 2019

Вы можете перемещать элементы такими методами, как .appendChild() и .insertBefore().Следующая демка имеет три <section>.Каждый <section> имеет вложенное <article>.Цель:

  1. Переместить статью 3 в раздел 2 как последний ребенок с .appendChild().

  2. Переместить статью 1 в раздел 2 какпервый ребенок с .insertBefore(). 

/*--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)
h1,
h2,
h3 {
  border-bottom: 2px solid #000;
}

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

article {
  outline: 2px solid #f00;
}
<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>
0 голосов
/ 21 мая 2019

1001 * попробовать * 

setTimeout(()=>{
  child.parentNode.removeChild(child);
},1000)
<div >parent
  <div id="child">child</div>
</div>
...