Question

我正在页面上移动很多元素，我无法访问html，所以我使用javascript来实现。移动一个div的innerhtml效果很好，但是如果我想要整个div而不只是我了解的内部内容，我可能想要externalhtml。但是，当我在代码中使用它时，出现控制台错误“ outerHTML不是函数”。

将内部html很好地移动：

y = dataset['XNumber']

获取控制台错误：

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

Answer 1

为了将jQuery对象转换为DOM元素，您需要以数组形式对其进行访问：

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

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

Answer 2

尝试

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

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

Answer 3

您可以使用.appendChild()和.insertBefore()之类的方法移动元素。以下演示具有三个<section>。每个<section>内都有一个<article>嵌套。目的是：

将第3条移动到第2节作为最后一个孩子，拥有.appendChild()。
将第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>

尝试移动div但获取“ outerhtml不是函数”

3 个答案: