如何通过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屋!