我如何让html显示在页面上,而不是运行
How to do i get html to display on page instead of running?
我的问题似乎与大多数人的问题相反。我不希望。innerhtml中的HTML运行。我希望它按原样显示在页面上。(我知道我的代码中还有一个问题。我正在努力)
https://jsfiddle.net/ojfykv17/或者
<div id="code">
</div>
function genorateCode() {
var account = document.getElementById("account");
var url = document.getElementById("url");
sendCode();
}
function sendCode() {
document.getElementById('code').innerHTML = '<a href="'+url+'">'+'<div class="button"><img src="https://s15.postimg.org/mfpd2ki8r/icon.png" width="16">@'+account+'</div></a>';
}
sendCode();
.button {
border-radius: 5px;
background-color: white;
border:1;
border-style: solid;
position: fixed;
padding: 5px 10px 5px 10px;
border-width: 1.2px;
line-height: 5px;
border-color: #a5aab1;
font-family: 'Lato', sans-serif;
font-weight:300;
text-align: center;
}
<form id="form" onsubmit="return false;">
<input type="text" id="account" />
<input type="text" id="url" />
<input type="submit" onclick="genorateCode();" />
</form>
<div id="code">
</div>
设置元素的innerText
,而不是innerHTML
。
document.getElementById('code').innerText = '<a href="'+url+ ...
您需要将所有HTML标记从<
和>
转换为<
和>
。否则,浏览器将把它呈现为HTML。
需要在代码中编辑几件事。第一个函数具有局部变量account
和url
,然后在第二个函数中访问它,当然第二个函数不在它的作用域内。
var account,url;
function genorateCode() {
// are you sure you want this document.getElementById("account")
// instead if this -> document.getElementById("account").value ???
account = document.getElementById("account").value;
url = document.getElementById("url").value;
sendCode();
}
在您的情况下,您可以使用insertAdjacentHTML,如下所示:
function sendCode() {
var str = '<a href="' + url + '">' + '<div class="button"><img src="https://s15.postimg.org/mfpd2ki8r/icon.png" width="16">@' + account + '</div></a>';
document.getElementById('code').insertAdjacentHTML('beforeend', str);
}
相关文章:
- 我的HTML按钮没有在Javascript中运行
- Disqus的计数.js脚本在索引中无法正常运行.html与react.js网站
- 如何在浏览器中运行.html文件
- Rails:服务器端运行HTML和Javascript
- 是否可以在 flash 横幅中运行 html<脚本>
- 在文本框内运行 HTML
- AJAX 不允许运行 HTML 类单击函数
- 保存运行 html(在浏览器中)时所做的更改
- 如何在没有服务器的情况下运行 HTML 时将文件夹设置为根路径
- 你会选择在Java应用程序中运行HTML / Javascript
- Ajax 客户端框架运行 HTML 代码时出错
- 动态运行HTML/Javascript
- 沙盒浏览器运行HTML &JS
- 使用JSX运行HTML页面时出现空白页面
- JavaScript文件不是只运行HTML CSS
- 当页面为index.php时运行html代码
- 如何在本地主机上运行html文件
- 仅当 javascript 函数为真时才运行 HTML
- 是否可以在单独的线程中运行 HTML 5 视频
- 有没有一种方法可以在Google Chrome环境中运行HTML文件?没有安装它