HTML - DOM 元素 outerHTML 属性

outerHTML 属性获取元素的完整 HTML 代码，包括其起始标签、属性、内容（包括子元素和文本内容）以及结束标签。

语法

设置 outerHTML 属性

element.outerHTML = text;

获取 outerHTML 属性

element.outerHTML;

属性值

值	描述
文本	您要为元素设置的新 HTML 内容。

返回值

outerHTML 属性返回一个字符串，其中包含元素的 HTML 内容，包括其属性、起始标签和结束标签。

HTML DOM 元素 'outerHTML' 属性示例

以下是一些示例，演示了 'outerHTML' 属性的使用，以便更好地理解。

修改 div 元素内容

此示例演示了如何使用 outerHTML 属性来更新 HTML 元素的内容。最初，有一个包含 <div> 元素的 <p> 标签。单击按钮时，其函数会使用新的结构更新 <p> 标签的内容。

<!DOCTYPE html>
<html>
<body>
    <h1>HTML - DOM Element</h1>
    <h2>outerHTML Property</h2>
    <p>Click to change the div's content.</p>
    <div id="ex">
        <p>Yes! I am a paragraph.</p>
    </div>

    <button onclick="changeOuterHTML()">
        Change outerHTML
    </button>

    <script>
        function changeOuterHTML() {
            const divEle = document.getElementById('ex');
            divEle.outerHTML=
            '<div id="newExample">
                <p>
                    Oops! You changed me.
                </p>
            </div>';

            // Displaying the updated HTML content
            document.getElementById('result').innerHTML = 
            "Updated outerHTML: " + divEle.outerHTML;
        }
    </script> 
    <p id="result"></p>
</body>

</html>

使用 outerHTML 进行克隆

此示例演示如何使用 outerHTML 属性克隆元素。最初，单击按钮时，该函数返回 <div> 元素的 outerHTML。然后，它创建一个新的 <div> 元素，然后克隆原始 <div> 的整个结构。

<!DOCTYPE html>
<html>
<body>
    <h1>HTML - DOM Element</h1>
    <h2>outerHTML Property</h2>
    <p>This clones the div elements...</p>
    <div id="real">
        <p>This is a paragraph in the source.</p>
    </div>

    <button onclick="cloneElement()">
        Clone Element
    </button>

    <script>
        function cloneElement() {
        const sourceDiv =document.getElementById('real');
        const clon = sourceDiv.outerHTML;

        // Creats new element same as HTML as the source
        const cloned = document.createElement('div');
        cloned.innerHTML = clon;

        // Appending the cloned element to the body
        document.body.appendChild(cloned);
        }
    </script>
</body>

</html>

删除元素

此示例演示了如何使用 outerHTML 属性通过将 <div> 元素的 outerHTML 设置为空字符串 ('') 来从 HTML DOM 中删除特定的 <div> 元素。

<!DOCTYPE html>
<html>
<body>
    <h1>HTML - DOM Element</h1>
    <h2>outerHTML Property</h2>
    <p>
        Upon clicking the button it will remove 
        the div element....
     </p>
    
    <div id="ex">
        <p>This paragraph will be removed.</p>
    </div>

    <button onclick="removeElement()">
        Remove Element
     </button>

    <script>
        function removeElement() {
        const divEle = document.getElementById('ex');
        
        divEle.outerHTML = '';
        }
    </script>
</body>

</html>

根据用户输入呈现 HTML

此示例演示如何使用 outerHTML 属性根据用户输入呈现 HTML 内容。单击按钮时，该函数将 <div> 元素的 outerHTML 设置为用户提供的 HTML 内容。

<!DOCTYPE html>
<html>
<head>
    <title>outerHTML Example</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>outerHTML Property</h2>
    <p>
        This clones the div elements...</p>
    <p>
        <b>Note:</b>
        The attribute also get cloned.
    </p>
    <div id="real">
        <p style="color: green;">
            This is a paragraph in the source.
        </p>
    </div>

    <button onclick="cloneElement()">
        Clone Element
    </button>
    
    <script>
        function cloneElement() {
        const sourceDiv =document.getElementById('real');
        const clon = sourceDiv.outerHTML;

        // Creats new element same as HTML as the source
        const cloned = document.createElement('div');
        cloned.innerHTML = clon;

        // Appending the cloned element to the body
        document.body.appendChild(cloned);
        }
    </script>
</body>

</html>

动态内容插入

此示例演示如何使用 outerHTML 属性将新内容插入 HTML 元素。单击按钮时，新 HTML 内容可以动态地插入到 DOM 结构中的特定位置。

<!DOCTYPE html>
<html>
<body>
    <h1>HTML - DOM Element</h1>
    <h2>outerHTML Property</h2>
    <p>
        Click the button to insert a new element
        before the existing content.
    </p>
    
    <div id="cont">
        <p>This is the existing content.</p>
    </div>

    <button onclick="insertEle()">
        Insert New Element
    </button>

    <script>
        function insertEle() {
            const contDiv = document.getElementById('cont');
            const newEle=
            '<div id="newDiv">
                <h3>New Element</h3>
                <p>This is a new paragraph.</p>
            </div>';
            
            // Inserts new element before the existing content
            contDiv.insertAdjacentHTML('beforebegin', newEle);
        }
    </script>
</body>

</html>

支持的浏览器

属性
outerHTML	是	是	是	是	是

html_dom_element_reference.htm

打印页面