html editor

作者：Angel★狂龙发布日期:2026-05-16 浏览:37

<!DOCTYPE html>
<html>
<head>
    <title>HTML Editor Example</title>
</head>
<body>
    <h1>Simple HTML Editor</h1>
    <textarea id="editor" rows="10" cols="50">
        <p>This is a simple HTML editor example.</p>
    </textarea>
    <br>
    <button onclick="displayHTML()">Display HTML</button>
    <div id="output"></div>

    <script>
        function displayHTML() {
            // 获取文本区域的内容
            var htmlContent = document.getElementById('editor').value;
            // 将内容设置到输出区域，并解析为HTML
            document.getElementById('output').innerHTML = htmlContent;
        }
    </script>
</body>
</html>

解释说明：

<textarea>：用于输入HTML代码的文本区域。
<button>：点击按钮时会调用displayHTML()函数，该函数会获取文本区域中的HTML代码并将其显示在页面上。
<div id="output">：用于显示由文本区域中输入的HTML代码生成的内容。
displayHTML()：JavaScript函数，用于获取文本区域中的HTML代码并将其解析为实际的HTML内容，显示在页面上。

下一篇：html网页播放器代码