Question

我对innerHTML进行了练习

使用getElementsByTagName（）检索类为'foo'的
的列表
重复元素并通过附加（添加到末尾）到coders.tokyo网站的链接来更改每个元素的内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>12-innerHTML</title>
</head>
<body>
    <h1>12-innerHTML</h1>
    <div class="list">
        <p class="foo">Hello eveyone</p>
        <p class="foo">My name is Hoang</p>
        <p class="foo">I'm studying at EPU</p>
    </div>
</body>
<script type="text/javascript">
        var getFoo = document.getElementsByTagName('p');
        var a = document.createElement('a'); // create a element
        a.innerHTML = 'Coders.Tokyo'; // content of a element

        for (var i = 0; i < getFoo.length; i++) {
            getFoo[i].textContent.appendChild(a); // get content of p element and append at the end.
        }
    </script>
</html>

我需要一个解决方案。非常感谢！

Answer 1

两个问题：

getFoo[i].textContent.appendChild(a);尝试对appendChild中的值调用textContent，但是该值是字符串，而不是元素。如果您只需要在元素上附加a，则从该行中删除.textContent。
您只创建一个一个 a元素，然后尝试将其附加到所有.foo元素中。如果您将文档中已经存在的其他元素附加到其他位置，则会将该元素移动到该新位置，而不是被复制。在循环体内中创建a元素，以便每次都创建一个新元素。（或使用cloneNode(true)。）

我故意不是在这里编写代码，而是说您应该如何更改代码，因为本练习的重点是让您您编写代码。

innerHTML，appendChild属性

1 个答案: