Question

那里。我试图在当前的html页面中创建一个链接。但是只有当我点击＆＃34;提交＆＃34;铬中的按钮。链接不会出现在页面中。有人能告诉我我做错了什么吗？代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Link Generator
</head>
<body>

<form name="nba" action="test3.html" onsubmit="return createlink();" method="post">
ASIN:<input type="text" name="team" />
<input type="submit" value="Submit!" />
</form>

<span id="insertHere"></span>

<script type="text/javascript">
    function createlink(){
    var link = document.createElement("a");
    link.textContent = "http://www.nba.com/" + document.nba.team.value;
    link.href = "http://www.nba.com/" + document.nba.team.value;
    document.write(link);
    document.write("<h1>  </h1>");
    document.body.appendChild(link);
    }

</script>
</body>
</html>

Answer 1

由于多种原因（see here），您不应该使用document.write。另外，使用h1将您的appendChild添加到DOM，方法与添加link元素的方式相同：

function createlink(){
var h1elem = document.createElement("h1");
 var link = document.createElement("a");
link.innerHTML = "http://www.nba.com/";
link.href = "http://www.nba.com/";
document.body.appendChild(h1elem);
 h1elem.appendChild(link); 
}

了解document.write here。请特别注意以下内容：

1 - document.write和document.writeln方法都应该将文本输出到未准备（打开）的文档中。
2 - 页面完成加载后，文档将关闭。尝试在其中记录document.write将导致内容被删除。
3 - Mozilla对使用Content-Type：application / xhtml + xml提供的任何文档使用XML解析模式。在这种模式下，浏览器将文档解析为XML，这是一种快速而酷的方法，但是由于这种解析的技术限制，document.write将无法工作。

Answer 2

避免document.write重写整个DOM。请参考这个Screencast document.write可以做什么。

另外请不要使用onsubmit="return createlink();"等内联JS钩子。

使用

element.addEventListener(event, function);

请参阅此JSFiddle以获取工作示例。

HTML：

<form name="nba" action="test3.html" id="form" method="post">
ASIN:<input type="text" name="team" />
<input type="submit" value="Submit!" />
</form>

JS：

function createlink(e){
    e.preventDefault();
    e.stopPropagation();
    var link = document.createElement("a");
    link.textContent = "http://www.nba.com/" + document.nba.team.value;
    link.href = "http://www.nba.com/" + document.nba.team.value;
    document.body.appendChild(link);
}
var form = document.querySelector('form');
form.addEventListener('submit', createlink);

使用js在html中创建链接

2 个答案: