首页 » DOM » outerHTML

outerHTML

在读取信息时,outerHTML会返回调用它的元素HTML代码,包括所有子节点。当写入信息时,outerHTML会解析给定的HTML字符串创建的DOM子树替代调用它的节点。假设有以下HTML代码:

<div id="content">
    <p>This is a <strong>paragraph</strong> with a list following it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

如果在例子中的<div>元素上调用outerHTML,就会返回与上面相同的HTML代码(包含<div>)。不过,取决于浏览器解析和解释HTML代码的方式,返回的结果也可能会不大一样。

使用outerHTML设置的示例代码如下:

div.outerHTML = "<p>This is a paragraph.</p>";

这行代码与下列DOM代码执行的操作完全一样:

var div = document.getElementById("content");
var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
div.parentNode.replaceChild(p, div);

结果,新创建的<p>元素就会取代DOM树中原来的<div>元素。

支持outerHTML属性的浏览器有IE、Safari、Opera和Chrome。与outerText属性类似,也几乎没人使用outerHTML,原因是这个属性会修改调用它的元素。

此文章发表在 DOM. 将 固定链接 加入收藏.