从输入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>

不要使用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>

相关内容

最新更新

热门标签：