试图移动一个 div 但得到“outerhtml 不是一个函数”

Posted 2023-05-07

【中文标题】试图移动一个 div 但得到“outerhtml 不是一个函数”

【英文标题】：Trying to move a div but getting "outerhtml is not a function"

【发布时间】：2019-10-07 09:15:59

【问题描述】：

我在一个页面上移动了很多元素，我无法访问 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);

【问题讨论】：

.outerhtml 用法不正确，需要使用.outerHTML（注意大写）。 Javascript 是区分大小写的语言

没有jquery函数来获取元素的outerHTML。你应该使用简单的js

它实际上在我正在使用的东西中大写，仍然得到错误。将更新我的问题以使其准确。

@MaheerAli 我以为这只是使用javascript？在网站上，它被

包围

试试outerHTML而不是outerHTML()

【参考方案1】：

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

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

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

【讨论】：

太棒了！非常感谢，感谢您提供有关属性之间差异的额外信息，我现在对谷歌有更好的了解-r

【参考方案2】：

试试

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

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

【参考方案3】：

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

将第 3 条作为 .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>