如何通过Javascript在两个div之间添加div [英] How to add a div between two divs by Javascript

问题描述

我正在使用wordpress，我想使用Javascript在页面上添加一些html代码.我不想让孩子成为主题，然后编辑php文件.这是冒险的，我对php并不了解.

I am using wordpress and I want to add some html code on page using Javascript. I don't want to make child theme then edit php files. It is risky and I don't know about php.

我想添加一个同级div.这是默认的示例代码.

I want to add a sibling div. This is an example code as default.

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

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

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

Now I want to add my custom div and its inside html between both div1 and div2.

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

请让我知道如何使用Javascript.

Please let me know how is it possible using Javascript.

推荐答案

(至少)有两种方法，第一种:

There are (at least) two ways, the first:

// 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()的地方:

And the second where you first create that <div> to be inserted, and then use 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>

参考:

• document.createElement() .
• document.querySelector() .
• Element.insertAdjacentHTML() .
• Node.firstChild .
• Node.insertBefore() .
• Node.nextSibling .
• Node.parentNode .

• document.createElement().
• document.querySelector().
• Element.insertAdjacentHTML().
• Node.firstChild.
• Node.insertBefore().
• Node.nextSibling.
• Node.parentNode.

这篇关于如何通过Javascript在两个div之间添加div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！