Question

我想遍历网页上的所有p标签，然后将它们写到网页的末尾。我认为这个for循环可以工作，但到目前为止它给了我一个错误。

我如何才能执行此操作，然后将

标记中的文字附加到页面末尾？ < / p>

function forLoopTest() {
    var i; //indexing tag for looping through all of the array elements

    //for loop to loop through the pp array starting at index of zero 
    for (i = 0; i < pp.length;i++) 
    {
       document.writeln("<br>" + pp[i].innerHTML); //write to the end of the page of each element
    }
}

HTML代码：

<!DOCTYPE html>
<html>
<body>
<div id="main">
    <p id="AA">A</p>
    <p id="BB">B</p>
    <p id="CC">C</p>
    <p id="DD">D</p>
    <p id="EE">E</p>
</div>
<p id="demo"></p>
<script>
    var x = document.getElementById("main");
    var pp = x.getElementsByTagName("p"); //creates an array of p elements
    document.getElementById("demo").innerHTML = 'The first paragraph inside "main" is ' + pp[1].innerHTML;

function forLoopTest() {
    var i;
    for (i = 0; i < pp.length;i++) {
       document.writeln("<br>" + pp[i].innerHTML;
    }
}

forLoopTest();
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>
<div id="main">
<div id="main">
    <p id="AA">A</p>
    <p id="BB">B</p>
    <p id="CC">C</p>
    <p id="DD">D</p>
    <p id="EE">E</p>
</div>

<p id="demo"></p>
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
    <p id="A">A</p>
    <p id="B">B</p>
    <p id="C">C</p>
    <p id="D">D</p>
    <p id="E">E</p>
    <div>Test</div>
</div>
<p id="demo"></p>
<script>
    var x = document.getElementById("main");
    var pp = x.getElementsByTagName("p"); //creates an array of p elements
    var divTag = x.getElementsByTagName("div"); //creates an array of div elements
    document.getElementById("demo").innerHTML = 'The first paragraph inside "main" is ' + pp[1].innerHTML;

function forLoopTest() {
    var i;
    for (i = 0; i < pp.length;i++) {
       document.writeln("<br>" + pp[i].innerHTML;
    }
}

var fragment = document.createDocumentFragment();

Array.prototype.forEach.call(document.getElementsByTagName('p'), function (element) {
    Array.prototype.forEach.call(element.childNodes, function (childNode) {
        fragment.appendChild(childNode.cloneNode(true));
    });
});

document.body.appendChild(fragment);
</script>

</body>
</html>

Answer 1

如果您阅读错误，它会告诉您存在语法问题并且误导为)。

你没有关闭write()

document.writeln("<br>" + pp[i].innerHTML;

应该是

document.writeln("<br>" + pp[i].innerHTML);

的 DEMO

Answer 2

有很多方法可以做到，一种解决方案可能就是。

HTML

<div id="main">
    <p id="AA">A</p>
    <p id="BB">B</p>
    <p id="CC">C</p>
    <p id="DD">D</p>
    <p id="EE">E</p>
</div>
<p id="demo"></p>

的Javascript

var fragment = document.createDocumentFragment();

Array.prototype.forEach.call(document.getElementsByTagName('p'), function (element) {
    Array.prototype.forEach.call(element.childNodes, function (childNode) {
        fragment.appendChild(childNode.cloneNode(true));
    });
});

document.body.appendChild(fragment);

之后的

HTML

<div id="main">
    <p id="AA">A</p>
    <p id="BB">B</p>
    <p id="CC">C</p>
    <p id="DD">D</p>
    <p id="EE">E</p>
</div>
<p id="demo"></p>
ABCDE

在jsFiddle

上

警告：cloneNode（）可能会导致重复的元素ID 文档。

如果盲目地复制元素的innerHTML，也是如此。

如何遍历所有P标记，然后将其innerHTML写入页面末尾的文档？

2 个答案: