如何使用javascript添加li元素

你有没有想过使用 JQuery？

脚本将像这样简单：

<script>
$('#social').append('<li><a href="#" target="_blank" id="twitter"><i class="fa fa-twitter fa-2x"></i></a></li>');
</script>

您忘记为锚点设置 href 值，并且实际链接中没有内容，因此没有显示任何内容。

newA.setAttribute('href', '#');
newA.innerHTML = 'something'; 

http://jsfiddle.net/d9vj2xwt/

您还应该尝试使用 element.classList.add（） 来添加类，这样您就不会覆盖

正如其他一些人所提到的，您正在覆盖该类，而不是附加一个新类。

添加类的旧方法是用空格分隔类

newI.setAttribute('class', 'fa fa-twitter fa-2x');

但是对于大多数现代浏览器，您可以使用classList.add（）

newI.classList.add('fa');
newI.classList.add('fa-twitter');
newI.classList.add('fa-2x');

JSFiddle： http://jsfiddle.net/3rgdvq70/

为什么要弄乱 DOM 节点呢？

var wantToAdd = "<li><a href='#' target='_blank' id='twitter'><i class='fa fa-twitter fa-2x'></i></a></li>";
document.getElementById("social").innerHTML += wantToAdd;

问题出在您的newI.setAttribute('class',它覆盖了以前添加的类。当你做console.log(newI)时，你会注意到同样的事情。

因此，一次性设置所有类，如下所示：

newI.setAttribute('class', 'fa fa-twitter fa-2x');

以下是工作代码片段：

var newLi = document.createElement('li');
var newA = document.createElement('a');
var newI = document.createElement('i');
newA.setAttribute('id', 'twitter');
newA.setAttribute('target', '_blank');
newI.setAttribute('class', 'fa fa-twitter fa-2x'); // set all classes in one go!
newLi.appendChild(newA);
console.log(newLi);  // check it here
newA.appendChild(newI);
var position = document.getElementById('social');
position.appendChild(newLi);

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css">
<ul class="social" id="social">
  <li><a href="#" target="_blank" id="facebook"><i class="fa fa-facebook fa-2x"></i></a></li>
  <li><a href="#" target="_blank" id="pinterest"><i class="fa fa-pinterest fa-2x"></i></a></li>
  <li><a href="#" target="_blank" id="instagram"><i class="fa fa-instagram fa-2x"></i></a></li>
</ul>

编辑：还要添加href属性，如@Kierkegaurd所指出

编辑2：如果您的意思是将您发布的代码作为评论引用@epascarello的答案，这是我的看法：

您的代码对我来说看起来是正确的，只是您没有为 newA 设置href属性.

以下是更新的工作代码片段：

//Add Twitter 
var newLi = document.createElement('li'); 
var newA = document.createElement('a'); 
var newI = document.createElement('i'); 
newA.setAttribute('id', 'twitter'); 
newA.setAttribute('target', '_blank'); 
newA.setAttribute('href', '#'); // set href here
newI.classList.add('fa'); 
newI.classList.add('fa-twitter'); 
newI.classList.add('fa-2x'); 
newLi.appendChild(newA); 
newA.appendChild(newI); 
var position = document.getElementById('social');
position.appendChild(newLi);

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css">
<ul class="social" id="social">
    <li><a href="#" target="_blank" id="facebook"><i class="fa fa-facebook fa-2x"></i></a></li>
    <li><a href="#" target="_blank" id="pinterest"><i class="fa fa-pinterest fa-2x"></i></a></li>
    <li><a href="#" target="_blank" id="instagram"><i class="fa fa-instagram fa-2x"></i></a></li>
</ul>

您可以使用innerHTML使生活更轻松：

var newLi = document.createElement('li');
newLi.innerHTML = '<a id="twitter" target="_blank" class="fa fa-twitter fa-2x"><i></i></a>';
var position = document.getElementById('social');
position.appendChild(newLi);