HTML - DOM 元素 outerText 属性

**outerText** 属性允许您访问或更新 HTML 元素的文本内容，包括其所有嵌套文本和元素。

语法

设置 outerText 属性值

node.outerText = text;

获取 outerText 属性值

node.outerText;

属性值

值	描述
文本	您要设置的文本内容。

返回值

当访问时，outerText 属性返回一个包含元素及其所有嵌套文本和元素的组合文本的字符串。

设置 outerText 属性时，它不返回任何值。

HTML DOM 元素 'outerText' 属性示例

以下是一些显示 'outerText' 属性用法的示例，以便更好地理解。

用新文本替换当前文本

此示例显示了 outerText 属性的用法。它包含一个包含文本的**<div>** 元素和**<p>** 元素。当单击按钮时，它会将 outerText 属性设置为一个新字符串，用新文本替换其所有当前内容。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>
        HTML DOM Element outerText Property
    </title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>outerText Property</h2>
    <h4>Click button to replace current 
    	text with new one.. 
    </h4><hr>
    <div id="exDiv">
        <p>This is some initial content.</p>
    </div>
    <br>
    <button onclick="changeText()">Change Text</button>

    <script>
        function changeText() {
            var ediv=document.getElementById('exDiv');
            ediv.outerText = 
            "This text has been replaced.";
        }
    </script>
</body>

</html>

访问 Div 元素的当前内容

此示例使用 outerText 属性访问**<div>** 元素以显示其当前文本内容。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Accessing outerText</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>outerText Property</h2>
    <h4>Click button below to display the 
    	current content.. 
    </h4><hr>

    <div id="exampleDiv">
        This is the current content.
        <p>Paragraph content.</p>
    </div>

    <hr>
    <button onclick="displayText()">
        Display Text
     </button>
    
    <div id="ot"></div>

    <script>
        function displayText() {
            var exDiv = document.getElementById('exampleDiv');
            var textContent = exDiv.outerText;

            // Display the outerText in the output div
            var otDiv = document.getElementById('ot');
            otDiv.textContent = textContent;
        }
    </script>
</body>

</html>

支持的浏览器

属性
outerText	是	是	是	是	是

html_dom_element_reference.htm

打印页面