creating a link in html with js

Question

there. I was trying to create a link in current html page. But the page seems to change only when I click the "submit" button in chrome. The link won't appear in the page.Could anyone tell me what I did wrong? The code looks like this:

<!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>

try without using `document.write`. here's why: [stackoverflow question](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) — danyamachine, Jul 20 '14 at 23:41

score 0 · Answer 1 · edited May 23 '17 at 10:33

you shouldn't be using document.write for several reasons (see here). also, add your h1 to the DOM using appendChild, in the same way you added your link element:

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); 
}

read about document.write here. Note, in particular, the following:

1 - Both document.write and document.writeln method should output text into an unready (open) document.
2 - When the page finishes loading, the document becomes closed. An attempt to document.write in it will cause the contents to be erased.
3 - Mozilla uses XML mode of parsing for any document served with Content-Type: application/xhtml+xml. In this mode, the browser parses the document as XML which is a fast and cool, but due to technical restrictions of such parsing, the document.write won’t work.

sarbbottam · Accepted Answer · 2014-07-20T23:58:03.700

0

Avoid document.write it re-writes the whole DOM. Please refer this Screencast what document.write can do.

Also please don't use inline JS hooks like onsubmit="return createlink();".

Use

element.addEventListener(event, function);

Please refer this JSFiddle for the working example.

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);

edited Jul 20 '14 at 23:58

answered Jul 20 '14 at 23:51

sarbbottam

4,772
3
26
39

The e.stopPropagation() doesn't seem to work. Any solution to it? – user3858845 Jul 21 '14 at 02:01
Which browser/OS are you trying on? Please refer [Browser compatibility matrix for event.stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation#Browser_Compatibility). – sarbbottam Jul 21 '14 at 02:02
I tried both Chrome and firefox. More and more links come out after repeating submit button. – user3858845 Jul 21 '14 at 02:10
``e.preventDefault(); and e.stopPropagation();`` is preventing the form from getting submitted. You need to update the code as per your use case. – sarbbottam Jul 21 '14 at 02:13

creating a link in html with js

2 Answers2