Question

我想在类型文章的每个元素之后使用函数add在Javascript中添加一个段落，但它不起作用。这是我写的代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
</head>

<body>
<article> here is one article
</article>
<article> here is the second article
</article>

<script type ="text/javascript">
function add(info)
{
    var art = document.getElementsByTagName('article');
    var par = document.createElement('p');
    par.textContent = info;
    var i;
    for(i in art)
    {
        art[i].appendChild(par);

        }
};
add("ex");
</script>

</body> 
</html>

我得到的输出是：这是一篇文章这是第二篇文章前

任何帮助将不胜感激！谢谢！

Answer 1

您只创建了一个节点，然后尝试将其“插入”每个文章。节点不会自动克隆，因此它仅插入到文章列表中的最后一个元素。您必须克隆原始节点到插入才能使其工作：

art[i].appendChild(par.cloneNode(true));

（true中的cloneNode标志以递归方式克隆节点，如果没有它，则必须手动附加每个节点副本上的文本）

您的示例中需要注意以下几点：

您的循环for(i in art)使用起来并不十分安全，因为您不会检查引用的元素是否实际上是列表的拥有成员（您不想引用art的原型成员。）相反，您可以简单地使用for(var i = 0; i < art.length; i++)。
您实际上是在文章中插入段落。要正确附加元素，可以SO answer明确说明如何在不使用其他库的情况下执行此操作。

Answer 2

您只创建一个段落。每次你绕过循环，你把那个段落放在文章的最后（从以前的任何地方移动）。

如果要创建多个，则需要在循环中创建段落。

Answer 3

您使用相同的DOM将每次循环放置。因此，在循环的每次迭代中创建新的DOM。尝试以下。

<script type ="text/javascript">
function add(info)
{
    var art = document.getElementsByTagName('article');

    var i;
    for(i in art)
    {   
        var par = document.createElement('p');
        par.textContent = info;
        art[i].appendChild(par);

    }
};
add("ex");
</script>

Javascript -function不会在每篇文章后添加段落

3 个答案: