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

列印頁面