在元素之间添加 div

Question

我有 2 个段落，在它们之间，我将调用一个函数。这个函数是在段落之间新建div

<div id="container">
    <p>lorem ipsum</p>
    <script>createDiv()</script>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
</div>

我看过 append()，但它需要附加一个目标。我想在每次调用该函数时自动添加 div 。

此外，document.write()但这会清除段落。

同一页面上有多个段落，我无法为这些段落添加 id 或 class。我无法控制它们。

Answer 1

首先创建一个函数并命名为createDiv:

<script>
    function createDiv(div) {
       document.write('<div>Testing</div>');
    }
</script>

他们调用你想要放置新函数的函数 div:

<p>lorem ipsum</p>
<script>createDiv()</script>
<p>lorem ipsum</p>

OBS：脚本必须在 HEAD 中。

Answer 2

如果在 p 标签内追加：

 $('p').append('<div>xyz</div>');

如果您将 p 标记作为同级附加到中间：

 $('<div>xyz</div>').insertAfter('p:first');

Answer 3

试试这个：删除脚本调用并将 id 分配给第一段，然后使用 .after() 附加 div

<p id="firstP">lorem ipsum</p>
<p>lorem ipsum</p>

注意：- 您可以对第一个 p 元素使用 class 属性而不是 id 并根据 $('.className')[ 等修改 jQuery 选择器

使用.after()

$(function(){
  $('#firstP').after('<div>Your div </div>');
});

Answer 4

将您的标记更改为

<p id="lorem">lorem ipsum</p>
 <div id="thediv">
 </div>
<p>lorem ipsum</p>

并调用 $("#thediv").append("<div>append div</div>");

或

  $('#lorem').after('<div>append div </div>');

Answer 5

$("p:first").after("<div>Hello World</div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>lorem ipsum</p>

<p>lorem ipsum</p>

Answer 6

如果我足够了解你的问题，这段代码应该可以正常工作。

<p>lorem ipsum</p>
<script>document.write('<div>Testing</div>')</script>
<p>lorem ipsum</p>

Answer 7

因为您拥有带有 ID 的 div 容器，您可以将其作为目标并逐步完成。请尝试以下操作：

$('#container > p:first').after('<div>hello</div>');

这将以容器 div 中的第一个 p 标签为目标，并在其后添加一个 div。

在性能方面，您可能希望使用 first() 方法而不是伪 class :first.

$('#container > p').first().after('<div>hello</div>');

这个 Whosebug 问题的答案显示了两种情况的测试： jQuery :first vs. .first()

Answer 8

我首先要说的是，你想做的事情非常丑陋。考虑到您的限制，您的应用程序结构很可能存在其他根本性错误。我什至觉得给你这个解决方案有点脏。

无论如何，要用您指定的代码示例和要求从字面上回答您的问题，您可能需要保留脚本注入标签的全局计数器，以便您可以附加到它的前一个兄弟。这是一个应该做你想做的事的例子 fiddle (http://jsfiddle.net/h5qttvx5/3/).

鉴于HTML

<div id="container">
<p>lorem ipsum</p>
<script>createDiv()</script>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<script>createDiv()</script>
</div>

和JS（头部）

var scripts = 0;
function createDiv() {
    $("#container > script").eq(scripts).prev().after("<div>HI</div>");
    scripts++;
}

Add div between element