Question

我有一张包含7个项目的幻灯片（7个div）。

我想在div位置3后添加一个新按钮。

来源：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>

像这样：

<div>1</div>
<div>2</div>
<div>3</div>
<button>Click me</button>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>

有任何方法可以做到吗？

感谢。

Answer 1

＆＃13;

$("div").eq(2).after("<button>click</button>")

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>

＆＃13;

使用.eq()获取第三个div

描述：将匹配元素集减少到指定索引处的元素。
使用.after()在div 3之后追加

描述：在匹配元素集中的每个元素之后插入由参数指定的内容。

Answer 2

您可以将ID提供给所有div，如：

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>
<div id="div6">6</div>
<div id="div7">7</div>

然后你可以在jquery中写下以下内容：

$("#div3").insertAfter("<button>Click me</button>");

我希望这会有所帮助。

Answer 3

如果您想使用vanilla Javascript，请尝试执行以下操作。我将假设您的<div>嵌套在另一个HTML元素中：

<div id="some-id">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

<强> JavaScript的：

<script>
    var btn = document.createElement("button");
    var btnText = document.createTextNode("Click me");
    btn.appendChild(btnText);

    var divs = document.getElementById("some-id");
    divs.insertBefore(btn, divs.childNodes[3]);
</script>

您需要做一些额外的工作来编程按钮等。

Answer 4

使用jQuery，你可以这样做。

var divs = jQuery("div");
var button = document.createElement("button");
button.value = "Click Me";
jQuery(jQuery(divs).get(3)).after(button);

这是我找到完成此任务的最简单方法。

Answer 5

HTML元素是用于创建没有默认值的可点击按钮的元素的特定版本。它已被HTML5取代。所以要创建一个带有标签的新按钮输入＆＃39;点击我＆＃39;在div之间键入打击代码。

也试试这个

点击我

如何在位置插入新元素：n在div中

5 个答案: