1

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

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

3 回答 3

3

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

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

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

于 2019-05-21T03:38:00.147 回答
0

您可以使用 和 等方法移动.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>

于 2019-05-21T04:16:43.260 回答
0

尝试

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

于 2019-05-21T03:26:45.650 回答