Question

我正在使用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。

Answer 1

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

// 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>');

＆＃13;

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

＆＃13;

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

＆＃13;

第二个是您首先创建要插入的<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);

＆＃13;

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);

＆＃13;

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

＆＃13;

参考文献：

Answer 2

使用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>

Answer 3

你可以这样做吗？

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

Answer 4

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

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

Answer 5

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

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

如何通过Javascript

5 个答案: