Javascript 带两个按钮的列表视图行集atribute div

我正在使用jquery mobile 1.4.3构建一个移动应用程序，我正在尝试创建一个列表视图，其中每行有2个按钮。 问题是，带有我插入的按钮的“div”没有出现，下面是小提琴示例：

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

代码示例：

var $menuList = $("#suggestions-list");

$menuList.empty();

var listItem = document.createElement("li");
var divForButtons = document.createElement("div");
var anchor = document.createElement("a");
var buttonAdd = document.createElement("a");
var buttonDelete = document.createElement("a");
var header1 = document.createElement("h1");
var header = document.createElement("h3");
var paragraph = document.createElement("p");

anchor.setAttribute("href", "");
anchor.setAttribute("data-id", "hey");

header.textContent = "something";
header1.textContent = "hello";
paragraph.textContent = "10" + "€";

buttonAdd.setAttribute("href", "#");
buttonAdd.setAttribute("data-role", "button");
buttonAdd.setAttribute("id", "btnUserSugAdd");
buttonAdd.setAttribute("data-id", "1");
buttonAdd.setAttribute("class", "split-custom-button");
buttonAdd.setAttribute("data-icon", "plus");
buttonAdd.setAttribute("data-rel", "dialog");
buttonAdd.setAttribute("data-theme", "c");
buttonAdd.setAttribute("data-iconpos", "notext");
buttonAdd.setAttribute("data-icon-position", "right");

buttonDelete.setAttribute("href", "#");
buttonDelete.setAttribute("align", "left");
buttonDelete.setAttribute("data-role", "button");
buttonDelete.setAttribute("id", "btnUserSugDel");
buttonDelete.setAttribute("data-id", "2");
buttonDelete.setAttribute("class", "split-custom-button");
buttonDelete.setAttribute("data-icon", "delete");
buttonDelete.setAttribute("data-rel", "dialog");
buttonDelete.setAttribute("data-theme", "c");
buttonDelete.setAttribute("data-iconpos", "notext");
buttonAdd.setAttribute("data-icon-position", "left");


divForButtons.appendChild(buttonAdd);
divForButtons.appendChild(buttonDelete);

anchor.appendChild(header);
anchor.appendChild(header1);
anchor.appendChild(paragraph);

listItem.appendChild(anchor);
listItem.appendChild(divForButtons);

$menuList.append(listItem);


$menuList.listview('refresh');

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

---

它们出现了。只是里面没有文字。试试这个：

var $menuList = $("#suggestions-list");

$menuList.empty(); 

    var listItem = document.createElement("li");
    var divForButtons = document.createElement("div");
    var anchor = document.createElement("a");
    var buttonAdd = document.createElement("a");
    var buttonDelete = document.createElement("a");
    var header1 = document.createElement("h1");
    var header = document.createElement("h3");
    var paragraph = document.createElement("p");

    anchor.setAttribute("href", "");
    anchor.setAttribute("data-id", "hey");

    header.textContent = "something";
    header1.textContent = "hello";
    paragraph.textContent = "10" + "€";

    buttonAdd.setAttribute("href", "#");
    buttonAdd.setAttribute("data-role", "button");
    buttonAdd.setAttribute("id", "btnUserSugAdd");
    buttonAdd.setAttribute("data-id", "1");
    buttonAdd.setAttribute("class", "split-custom-button");
    buttonAdd.setAttribute("data-icon", "plus");
    buttonAdd.setAttribute("data-rel", "dialog");
    buttonAdd.setAttribute("data-theme", "c");
    buttonAdd.setAttribute("data-iconpos", "notext");
    buttonAdd.setAttribute("data-icon-position", "right");
    buttonAdd.text = "Add";//add text to button add

    buttonDelete.setAttribute("href", "#");
    buttonDelete.setAttribute("align", "left");
    buttonDelete.setAttribute("data-role", "button");
    buttonDelete.setAttribute("id", "btnUserSugDel");
    buttonDelete.setAttribute("data-id", "2");
    buttonDelete.setAttribute("class", "split-custom-button");
    buttonDelete.setAttribute("data-icon", "delete");
    buttonDelete.setAttribute("data-rel", "dialog");
    buttonDelete.setAttribute("data-theme", "c");
    buttonDelete.setAttribute("data-iconpos", "notext");       
    buttonAdd.setAttribute("data-icon-position", "left");
    buttonDelete.text = "Delete"; //Add text to button delete


    divForButtons.appendChild(buttonAdd);
    divForButtons.appendChild(buttonDelete);

    anchor.appendChild(header);
    anchor.appendChild(header1);
    anchor.appendChild(paragraph);

    listItem.appendChild(anchor);
    listItem.appendChild(divForButtons);

    $menuList.append(listItem);


$menuList.listview('refresh');

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

---

它们出现了。只是里面没有文字。试试这个：

var $menuList = $("#suggestions-list");

$menuList.empty(); 

    var listItem = document.createElement("li");
    var divForButtons = document.createElement("div");
    var anchor = document.createElement("a");
    var buttonAdd = document.createElement("a");
    var buttonDelete = document.createElement("a");
    var header1 = document.createElement("h1");
    var header = document.createElement("h3");
    var paragraph = document.createElement("p");

    anchor.setAttribute("href", "");
    anchor.setAttribute("data-id", "hey");

    header.textContent = "something";
    header1.textContent = "hello";
    paragraph.textContent = "10" + "€";

    buttonAdd.setAttribute("href", "#");
    buttonAdd.setAttribute("data-role", "button");
    buttonAdd.setAttribute("id", "btnUserSugAdd");
    buttonAdd.setAttribute("data-id", "1");
    buttonAdd.setAttribute("class", "split-custom-button");
    buttonAdd.setAttribute("data-icon", "plus");
    buttonAdd.setAttribute("data-rel", "dialog");
    buttonAdd.setAttribute("data-theme", "c");
    buttonAdd.setAttribute("data-iconpos", "notext");
    buttonAdd.setAttribute("data-icon-position", "right");
    buttonAdd.text = "Add";//add text to button add

    buttonDelete.setAttribute("href", "#");
    buttonDelete.setAttribute("align", "left");
    buttonDelete.setAttribute("data-role", "button");
    buttonDelete.setAttribute("id", "btnUserSugDel");
    buttonDelete.setAttribute("data-id", "2");
    buttonDelete.setAttribute("class", "split-custom-button");
    buttonDelete.setAttribute("data-icon", "delete");
    buttonDelete.setAttribute("data-rel", "dialog");
    buttonDelete.setAttribute("data-theme", "c");
    buttonDelete.setAttribute("data-iconpos", "notext");       
    buttonAdd.setAttribute("data-icon-position", "left");
    buttonDelete.text = "Delete"; //Add text to button delete


    divForButtons.appendChild(buttonAdd);
    divForButtons.appendChild(buttonDelete);

    anchor.appendChild(header);
    anchor.appendChild(header1);
    anchor.appendChild(paragraph);

    listItem.appendChild(anchor);
    listItem.appendChild(divForButtons);

    $menuList.append(listItem);


$menuList.listview('refresh');

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

---

设置一些文本以查看锚元素

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

---

设置一些文本以查看锚元素

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

---

我将首先放置演示链接，然后解释：

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

这是您最新的

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

将类添加到

（例如，具有EditBTN）：

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

最后，为这些类添加一些CSS规则：

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

.has-editBtns li > a {
    margin-left: 40px !important;
}
.editBtns {
    position: absolute;
    top: 0px;
    width: 39px;
    bottom: 0px;
    padding-left: 6px;
    border-top: 1px solid rgb(221, 221, 221);
}
.editBtns a:first-child {
    position: absolute;
    bottom: 50%;
    margin-bottom: 2px;
}
.editBtns a:last-child {
    position: absolute;
    top: 50%;
    margin-top: 2px;
}

---

这会将主链接移动到右侧，为按钮留出空间。按钮div绝对位于左侧，两个按钮一个在另一个之上。

我将首先放置演示链接，然后解释：

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

这是您最新的

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

将类添加到

（例如，具有EditBTN）：

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

最后，为这些类添加一些CSS规则：

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

.has-editBtns li > a {
    margin-left: 40px !important;
}
.editBtns {
    position: absolute;
    top: 0px;
    width: 39px;
    bottom: 0px;
    padding-left: 6px;
    border-top: 1px solid rgb(221, 221, 221);
}
.editBtns a:first-child {
    position: absolute;
    bottom: 50%;
    margin-bottom: 2px;
}
.editBtns a:last-child {
    position: absolute;
    top: 50%;
    margin-top: 2px;
}

---

这会将主链接移动到右侧，为按钮留出空间。按钮div绝对位于左侧，两个按钮一个在另一个上面。

无意冒犯，但为什么您在4分钟后发布了与我完全相同的答案？：P@Alek，事实上，我花了一些时间在Chrome开发者工具中调试，并在Dom元素中找到空锚，我理解，这就是我没有投你反对票的原因。但正如你所看到的，我早就回答了，你可以对我的答案投赞成票/反对票，也可以发布另一个答案。：）无意冒犯，但为什么你在4分钟后发布了与我完全相同的答案P@Alek，事实上，我花了一些时间在Chrome开发者工具中调试，并在Dom元素中找到空锚，我理解，这就是我没有投你反对票的原因。但正如你所看到的，我早就回答了，你可以对我的答案投赞成票/反对票，也可以发布另一个答案。：）你想要按钮并排，还是一个在另一个上面？它们应该出现在列表项中的什么位置（一直向左、一直向右、箭头图标之前、文本之后等等）？您希望按钮并排还是一个在另一个之上？它们应该出现在列表项的何处（一直向左、一直向右、箭头图标之前、文本之后等等）？

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>