Question

 <li class="list" id='+id+'>
  <a class="anchor" id='+id+' href='#stay' onClick="getValue(this);"       style="text-decoration: none, color:red">hello</a>

现在在JavaScript中：

  listElem=listElem+'<li class="list" style="height: 18px; display: inline-       block;width:100px;line-height: 20px;padding-right:25px;"><a class="anchor"      id=""+results+"" href="#stay"  style="width:1028px;">"+results+"</a>  </li>';

现在我需要在li标签后附加listElem。因为id是动态生成的。

我怎么能通过innerHTML或html（）附加它？

我怎么能在这里传递id：$( "" ).html(listElem);或者在这里是否还有其他方法？

Answer 1

这是一个选项：

var ul = document.querySelector('ul');
var li1 = makeLi();
var li2 = makeLi();
var li3 = makeLi();
insert(ul, li2); // insert #my-uid-2
insert(ul, li1); // insert #my-uid-1
insert(ul, li3); // insert #my-uid-3

function uid () {
  var i = 1;
  return (this.uid = function () {
    return 'my-uid-' + (i++);
  })();
};

function makeLi () {
  var re = /\+id\+/g;
  var ul = document.createElement('ul');
  var li = '<li id="+id+">#+id+</li>';
  return (this.makeLi = function () {
    ul.innerHTML = li.replace(re, uid());
    return ul.firstChild;
  })();
}

function insert (ul, li) {
  var child;
  var i = 0;
  var re = /^.*?(\d+)$/;
  var n = +li.id.replace(re, '$1');
  var children = ul.childNodes;
  while (
    (child = children[i]) && 
    n > +child.id.replace(re, '$1')
  ) i++;
  if (child) ul.insertBefore(li, child)
  else ul.appendChild(li);
}

#my-uid-1 {
  background: yellow;
}
#my-uid-2 {
  background: orange;
}
#my-uid-3 {
  background: red;
}

<ul></ul>

Answer 2

您可能正在寻找jQuery的insertAfter()和prop()方法。

如果您将HTML代码放在变量listItem中，可以将其转换为jQuery对象，使用prop()设置ID，然后使用insertAfter()将其放在最后{带有<li>的<1}}元素：

class="list"

Answer 3

你可以点击活动

这样做

var listElem = jQuery('<li class="list" style="height: 18px; display: inline-block;width:100px;line-height: 20px;padding-right:25px;"><a class="anchor" id=""+results+"" href="#stay"  style="width:1028px;">"+results+"</a></li>');
listElem.prop('id', id).insertAfter('li.list:last');

jQuery代码：

<li class="list" id='+id+' onclick='getvalue(this)'>
  <a class="anchor" id='+id+' href='#stay' onClick="getValue(this);"       style="text-decoration: none, color:red">hello</a>

Answer 4

如果我正确理解你的问题，那么jQuery提供了jQuery对象的before方法。要在listElem元素之前附加li，您可以调用

$('#+id+').before(listElem);

通过JavaScript为动态生成的id添加元素

4 个答案: