Question

我正在尝试将此代码添加到我的页面中：

<li><a href="#" target="_blank" id="twitter"><i class="fa fa-twitter fa-2x"></i></a></li>

以下是完整列表：

<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>

以下是我写的剧本：

//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');
newI.setAttribute('class', 'fa');
newI.setAttribute('class', 'fa-twitter');
newI.setAttribute('class', 'fa-2x');

newLi.appendChild(newA);
newA.appendChild(newI);

var position = document.getElementById('social');

position.appendChild(newLi);

Answer 1

你有没有想过使用JQuery？

脚本就像这样简单：

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

Answer 2

正如其他几个人所提到的那样，你正在压倒这个班级，而不是增加一个新班级。

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

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/

Answer 3

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

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

http://jsfiddle.net/d9vj2xwt/

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

Answer 4

问题在于你的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>

编辑：同时添加@Kierkegaurd指出的href属性

EDIT2：如果您想将您发布的代码作为评论引用到@ epascarello的答案，请接受以下内容：

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

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

//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>

Answer 5

为什么要混淆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;

Answer 6

使用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);

如何使用javascript添加li元素

6 个答案: