Question

我的DOM目前看起来像这样：

<body>
  <h1> </h1>
  <button> </button>
  <p> </p>

点击该按钮后，我想在按钮和初始p之间添加另一个p。我已经尝试过前置p，但它看起来并不像我想要的那样。我也试过追加按钮，但它采用了按钮的风格，我也不想要。

理想情况下，我希望保留初始p的样式，但在初始值之前添加另一个单独的p块。我怎样才能实现这一点，最好是附加/前置？

Answer 1

如果你正在使用JQuery，那么有一种方法，它之前被调用过。 http://api.jquery.com/before/，可以与：first-child选择器结合使用。

var count=0;
$('button').on('click', function () {
  count++;
    $("#paragraphs p:first-child").before($('<p>New Paragraph #' + count + '</p>'));
});

Working Example

Answer 2

这是您可能想要尝试做的非常粗略的草案。

，如果DOM状态保持不变，则不会从段落中攻击该问题而是从按钮攻击它

代码看起来应该是这样的

function addParagraph(sender) {
    $(sender).after( "<p>Test</p>" );
}

你可以像这样点击按钮的onclick事件（这可以更改为你可能想要使用的任何其他内容）

<button onclick="addPara(this)">Add Paragraph</button>

现在因为你的结构总是

<h1></h1>
<button></button>
<p></p>

它总是将新元素推送到按钮之后，并始终在结构中的下一个元素之前。另一种方法是做Gus所做的事情并创建一个DIV容器并继续将新元素推到DIV的第一位。

如何在HTML中的两个元素之间添加元素

2 个答案: