使用innerHTML创建超链接失效，能否用于HTML编辑器开发？
2026-5-9
问题描述
我正在开发一款HTML编辑器，希望通过设置innerHTML的方式创建超链接（不想使用createElement方法），但目前链接无法正常工作。以下是我的代码：
<html> <head> <link href="css/styles.css" rel="stylesheet"> </head> <body onload="createImg()"> <h1>My Website</h1> <p>This is my first website</p> <div id='working_area' > </div> <script> function createImg(){ var img=document.getElementById("working_area"); img.innerHTML="<a src='https://www.google.com'>google</a>"; } </script> </body> </html>
请问这种通过innerHTML创建超链接的方式是否可行？
解答
这种方式完全可行，你遇到的问题只是代码里的一个小语法错误：
- 超链接标签
<a>用来指定跳转地址的属性是href，而不是src。src属性通常用于图片(<img>)、脚本(<script>)等需要加载外部资源的标签，并不适用于<a>标签。
修正后的代码如下：
function createImg(){ var img=document.getElementById("working_area"); img.innerHTML="<a href='https://www.google.com'>google</a>"; }
额外说明
对于HTML编辑器场景来说，使用innerHTML拼接HTML字符串的方式非常契合需求——它允许你直接生成和编辑完整的HTML片段，比createElement更直观，也更便于处理复杂的HTML结构。不过需要注意：
- 如果编辑器允许用户输入自定义内容，一定要做好XSS防护，避免恶意脚本注入。
- 确保拼接的HTML语法正确，标签属性、闭合规则都要符合标准，否则可能出现渲染异常或功能失效的问题。
内容的提问来源于stack exchange，提问作者Siddharth Rout
