如何克隆、更新和更新？使用 JavaScript 附加变量

Question

我正在尝试创建一个具有“.comments”内值的变量，然后在“4 条评论”前面添加“阅读全部”一词。最后，将新变量附加到“#comments”。

设法编写一些内容，但它正在移动现有对象，而不是使用现有对象的值创建一个新对象。

下面是一些代码

<script type="text/javascript">
var commentsLink = document.querySelector('.story .comments a'),    
    commentsSubmit = document.querySelector('#comments .form-item-submit');
commentsLink.innerHTML = 'Read all ' + commentsLink.innerHTML;
commentsLink.className += 'readComments';
commentsSubmit.appendChild(commentsLink);
</script>

<div class="story">
     <div class="comments">
           <a href="http://foo.com">4 comments</a>
     </div>
</div>
<div id="comments">
     <div class="form-item-submit">Submit</div>
</div>

期望的结果：

<div class="story">
     <div class="comments">
           <a href="http://foo.com">4 comments</a>
     </div>
</div>
<div id="comments">
     <div class="form-item-submit">Submit</div>
     <a href="http://foo.com" class="readComments">Read all 4 comments</a>
</div>

任何人都可以阐明这一点吗？请不要使用 Jquery。

Answer 1

1. 要克隆元素，请使用 cloneNode。要复制文本内容，请使用 cloneNode(true)。
2. 您希望将克隆的链接附加到提交 div 的 parent 元素，而不是提交 div 本身。

http://jsfiddle.net/eDGwj/

var commentsLink = document.querySelector('.story .comments a').cloneNode(true),
    commentsSubmit = document.querySelector('#comments .form-item-submit');

commentsLink.innerHTML = 'Read all ' + commentsLink.innerHTML;
commentsLink.className += 'readComments';

commentsSubmit.parentNode.appendChild(commentsLink);

Answer 2

像这样的东西：

<script type="text/javascript">
var commentsLink = document.querySelector('.story .comments a'),    
    commentsSubmit = document.querySelector('#comments .form-item-submit'),
    anchor = commentsLink.cloneNode(false);

anchor.innerHTML = 'Read all ' + commentsLink.innerHTML;
anchor.className += ' readComments';

commentsSubmit.parentNode.appendChild(anchor);
</script>

Answer 3

我想这就是你想要的，如果不是请评论：

<script type="text/javascript">
    var commentsLink = document.querySelector('.story .comments a'),    
        commentsSubmit = document.querySelector('#comments .form-item-submit');
    var cloneLink = commentsLink.cloneNode(true);
    cloneLink.innerHTML = 'Read all ' + commentsLink.innerHTML;
    cloneLink.className += 'readComments';
    commentsSubmit.appendChild(cloneLink);
</script>

关键函数是cloneNode()，注意Id的

更多信息

希望这有帮助