Javascript 在定义列表项旁边添加按钮

我已设置以下定义列表：

<dl class="details">
    <dt>Name:</dt>
    <dd>John Doe</dd>
    <dt>Title:</dt>
    <dd>Engineer</dd>
 </dl>

姓名：
无名氏
标题：
工程师

以下是js fiddle，其中包含css：

现在我需要在dt旁边添加一个edit and delete按钮，并添加一些额外的间距，因此它应该看起来像：

姓名：John Doe编辑删除

平铺：工程师编辑删除

---

我不知道如何才能不添加一些黑客类。

首先，链接对这类东西不好：

用按钮代替。也就是说：

<dl class="details">
<dt>Name:</dt>
<dd>John Doe&nbsp&nbsp&nbsp<a href='edit'>edit</a>&nbsp&nbsp&nbsp<a href='delete'>delete</a></dd>
<dt>Title:</dt>
<dd>Engineer&nbsp&nbsp&nbsp<a href='edit'>edit</a>&nbsp&nbsp&nbsp<a href='delete'>delete</a></dd>

姓名：
约翰·多伊
标题：
工程师

---

在标记中添加按钮没有错

<dl class="details">
    <dt>Name:</dt>
    <dd>John Doe <button>moo</button></dd>
    <dt>Title:</dt>
    <dd>Engineer <button>moo</button></dd>
</dl>

---

附加它们

$('.details dd').each(function() {//for each dd
    $(this).append('<button>edit</button><button>delete</button>');//add buttons
});

$（'.details dd'）。每个（函数（）{//用于每个dd
$（this）.append（'editdelete'）；//添加按钮
});

---

做了一个修改：

所以我更改了dd和dt规则上的css，使其显示：内联块并删除浮动。然后我添加了一个button类，该类也显示内联块，并在dd上直接添加了按钮，这些按钮位于您在dd上获得的信息之后

姓名：
无名氏编辑
标题：
工程师编辑

您计划如何添加按钮？jquery？如果可能的话，只需要简单的css。但是您需要dom元素来放置按钮，因为javascript无法选择伪元素，例如

：before

，

：after

。如何触发这些按钮？为什么不使用一个表，甚至ul/ol？“dl”代表定义列表，所以在这里使用它们没有任何意义。我现在正在考虑可能的替代方案。但是我想知道使用dl/dt是否可行“链接对这类事情不好”…但是你使用的是链接而不是按钮@otinanai我不是说一般的链接都不好。事实上，他们很棒。只是在接触数据时不要使用它们。这似乎是一个合适的答案。虽然它可能只是模板的一部分，而不是事后添加，除非有原因。我喜欢这个答案，但我不需要在每个dd上都进行编辑删除，而且在某个时刻，我可能不得不为某个dd命名一个不同的标签。所以在这一点上，埃文的答案适合我。这太棒了。我肯定不认为这个问题是关于如何在html中添加按钮标记的，但我很高兴您得到了一个有效的答案。

$('.details dd').each(function() {//for each dd
    $(this).append('<button>edit</button><button>delete</button>');//add buttons
});

<dl class="details">
    <dt>Name:</dt>
    <dd>John Doe <button class="edit button">Edit</button></dd>
    <dt>Title:</dt>
    <dd>Engineer<button class="edit button">Edit</button></dd>
</dl>