如何通过Javascript在两个div之间添加一个div答案

【问题标题】：How to add a div between two divs by Javascript如何通过Javascript在两个div之间添加一个div
【发布时间】：2017-05-16 10:51:17
【问题描述】：

我正在使用 wordpress，我想使用 Javascript 在页面上添加一些 html 代码。我不想制作子主题然后编辑 php 文件。有风险，我不懂php。

我想添加一个兄弟 div。这是默认的示例代码。

<div class="div1">
  <div class="div1inside">
  Text
  </div>
</div>

<div class="div2">
  <div class="div2inside">
  Text
  </div>
</div>

现在我想在 div1 和 div2 之间添加我的自定义 div 及其内部 html。

<div class="mydiv">
  <div class="mydivinside">
  Text
  </div>
</div>

请告诉我如何使用 Javascript。

【问题讨论】：

insertBefore? document.insertBefore(mydiv, div2);?
可能重复：How to append a childnode to a specific position
我试过但失败了。 var test = document.getElementsByClassName('div2') new Element('div', { "class": 'topheader', "id": 'topheader', html: '

文本

' }).inject(test, 'before');
jsfiddle.net/samuraii/3bpbcvjp/1

标签： javascript html

【解决方案1】：

此链接将有助于获得上述结果。

https://plainjs.com/javascript/manipulation/insert-an-element-after-or-before-another-32/

【讨论】：

请为您的问题添加更多描述

【解决方案2】：

你可以这样做吗？

var firstDiv = document.getElementById('div1');
firstDiv.parentNode.insertBefore(document.getElementById('new-div'), firstDiv.nextSibling);

然而，这假设您的 new-div 已经在 dom 中。

编辑：要即时创建new-div，您可以使用@david-thomas 的解决方案https://stackoverflow.com/a/41425079/1768337

【讨论】：

【解决方案3】：

有（至少）两种方式，第一种：

// document.querySelector() finds, and returns, the first element
// matching the supplied selector (or null, if no element is found):
var el1 = document.querySelector('.div1');

// here we create an adjacent element from the string of HTML,
// the 'afterend' argument states that this adjacent element
// follows the el1 node, rather than preceding it or appearing
// within:
el1.insertAdjacentHTML('afterend', '<div class="mydiv"><div class="mydivinside">Text</div></div>');

var div1 = document.querySelector('.div1');

div1.insertAdjacentHTML('afterend', '<div class="mydiv"><div class="mydivinside">Text</div></div>');

<div class="div1">
  <div class="div1inside">
    Text
  </div>
</div>

<div class="div2">
  <div class="div2inside">
    Text
  </div>
</div>

第二个是您首先创建要插入的<div>，然后使用parentNode.insertBefore()：

var htmlString = '<div class="mydiv "><div class="mydivinside">Text</div></div>',

  // here we create a <div> element:
  div = document.createElement('div'),

  // we retrieve the element after which the new
  // element should be inserted:
  div1 = document.querySelector('.div1');

// assign the supplied HTML string to the innerHTML of the
// created element:
div.innerHTML = htmlString;

// and use parentNode.insertBefore to insert the desired element
// (the first argument) before the element identified in the
// second argument, which is the nextSibling of the found
// 'div1' element:
div1.parentNode.insertBefore(div.firstChild, div1.nextSibling);

var htmlString = '<div class="mydiv "><div class="mydivinside">Text</div></div>',
  div = document.createElement('div'),
  div1 = document.querySelector('.div1');

div.innerHTML = htmlString;

div1.parentNode.insertBefore(div.firstChild, div1.nextSibling);

<div class="div1">
  <div class="div1inside">
    Text
  </div>
</div>

<div class="div2">
  <div class="div2inside">
    Text
  </div>
</div>

参考资料：

【讨论】：

【解决方案4】：

您可以使用 before 方法在 div1 和 div2 之间附加一个 div。这是一个例子：

$('.div2inside').before("<div class='mydiv'><div class='mydivinside'>Text</div></div>");

【讨论】：

【解决方案5】：

使用Node#insertBefore 方法。

// create a div element
var div = document.createElement('div');
// set class name
div.className = 'mydiv';
// set html contents
div.innerHTML = ' <div class="mydivinside">  Text  </div>';

// get .div2 element
var ele = document.querySelector('.div2');

// insert before the .div2 element by getting
// its parent node
ele.parentNode.insertBefore(div, ele);

<div class="div1">
  <div class="div1inside">
    Text
  </div>
</div>

<div class="div2">
  <div class="div2inside">
    Text
  </div>
</div>

【讨论】：