尝试移动 div 但得到 "outerhtml is not a function"

Question

我在一个页面上移动了很多元素，我无法访问 html，所以我用 javascript 来做。移动 div 的内部 html 工作正常，但如果我想要整个 div 而不仅仅是我理解的内部内容，我可能想要外部 html。当我在我的代码中使用它时，我收到控制台错误 "outerHTML is not a function".

移动内部 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);
}

Answer 1

尝试

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

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

Answer 2

为了将 jQuery 个对象转换为 DOM 个元素，您需要将其作为数组访问：

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

另请注意，与 jQuery 的 .html() 不同，DOM API .innerHTML 和 .outerHTML 不是函数，它们是只是属性（实际上 getters and setters）

Answer 3

您可以使用 .appendChild() 和 .insertBefore() 等方法移动元素。以下演示有三个 <section>。每个 <section> 都嵌套了一个 <article>。 objective 是：

将第 3 条移至第 2 节作为最后 child 和 .appendChild()。
将第 1 条移至第 2 节作为第一个 child 和 .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>

尝试移动 div 但得到 "outerhtml is not a function"

Trying to move a div but getting "outerhtml is not a function"

javascript

jquery

function

outerhtml