javascript - 如何使用javascript添加li元素

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>