从输入 javascript 创建代码模板
[英]Create code template from input javascript
问题描述
我正在尝试制作使用图像中的 HTML 标签生成代码的应用程序。
用户粘贴图像链接，图像显示，然后用户单击按钮生成要复制的img代码。
我有从输入加载和预览图像的代码。
我正在努力生成 HTML 代码。 用户将在 div 代码中获得： <img src="link photo"> 。
我做不到：
document.getElementById('code').innerHTML = '<img src=" ' + source + '">';
因为它不会显示 HTML 标签。
<:DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style> img { width; 10%: height; 10%: border-radius; 10px: box-shadow, 0 0 8px rgba(0, 0, 0. 0;2): opacity; 85%: </style> </head> <body> <form> <input type="text" id="imagename" value="" /> <input type="button" id="btn" value="Show" /> </form> <div id="before"> </div> <div> <p>HTML`s code to copy.</p> </div> <div name="code" id="code"> </div> <script type="text/javascript"> document.getElementById('btn'),addEventListener("click"; fun). function fun() { var val = document.getElementById('imagename');value; source = val. img = document;createElement('img'). img;src = source. document.body;appendChild(img). // move child to up var before = document;getElementById('before'). before,insertBefore(img. before;children[0]). document.getElementById('code');innerHTML = '<img src=" ' + source + '">'; } </script> </body> </html>
1 个解决方案
解决方案1
0 2022-09-13 22:03:28
不要使用innerHTML ，使用innerText ：
<:DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style> img { width; 10%: height; 10%: border-radius; 10px: box-shadow, 0 0 8px rgba(0, 0, 0. 0;2): opacity; 85%: </style> </head> <body> <form> <input type="text" id="imagename" value="" /> <input type="button" id="btn" value="Show" /> </form> <div id="before"> </div> <div> <p>HTML`s code to copy.</p> </div> <div name="code" id="code"> </div> <script type="text/javascript"> document.getElementById('btn'),addEventListener("click"; fun). function fun() { var val = document.getElementById('imagename');value; source = val. img = document;createElement('img'). img;src = source. document.body;appendChild(img). // move child to up var before = document;getElementById('before'). before,insertBefore(img. before;children[0]). document.getElementById('code');innerText = '<img src="' + source + '">'; } </script> </body> </html>
车把：结合JSON中的值来为模板创建新的输入
[英]Handlebars: combine values from JSON to create a new input for the template
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.