如何让document.write()脚本生成与原<a>标签一致的结果？

云原生阿岚

2026-8-7

问题修复方案

问题根源

你直接把DOM元素（page_list[i]是<a>元素对象）和字符串拼接时，JavaScript会自动调用元素的toString()方法，输出结果是[object HTMLAnchorElement]，而非你需要的链接HTML内容，这才导致生成的列表和原列表不一致。

修复方法

方法1：使用元素的`outerHTML`属性

outerHTML会返回元素的完整HTML代码，直接拼接该属性值即可得到正确的链接结构：

<ul>
    <script>
        var page_list = document.querySelectorAll('a');
        var i = 0;
        while(i < page_list.length){
            document.write('<li>' + page_list[i].outerHTML + '</li>');
            i = i + 1;
        }
    </script>
</ul>

方法2：创建DOM元素并追加（更规范）

document.write在页面加载完成后使用会覆盖整个页面，更稳妥的做法是创建元素并添加到目标列表中：

<ul id="dynamic-list"></ul>
<script>
    var page_list = document.querySelectorAll('a');
    var targetList = document.getElementById('dynamic-list');
    for(var i = 0; i < page_list.length; i++){
        var li = document.createElement('li');
        // 复制原链接元素，避免移动原页面中的元素
        li.appendChild(page_list[i].cloneNode(true));
        targetList.appendChild(li);
    }
</script>