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

Question

我有一張包含7個項目（7格）的幻燈片。

我想在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

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

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

1. 使用.eq（）獲得第三格

   說明：將匹配元素的集合減少為指定索引處的元素。

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

如果要使用原始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取代。 因此要創建帶有標簽“ Click me”的新按鈕輸入，請在div之間鍵入打擊代碼。

也試試這個

點擊我